/* Table of contents.
   The plugin that generated these blocks shipped its own stylesheet, and the
   Wayback capture never included it. All that survived inside the theme is a
   bullet (div.lwptoc_item:before) plus a 25px indent, so every review page
   rendered its contents list as bare browser bullets. This restores a readable
   panel using the theme's own palette: white on the dark hero, ink on light
   sections. Nothing here overrides archived rules beyond the TOC itself. */

.lwptoc {
    width: 42.5rem;            /* matches #hero-unit p, so edges line up */
    max-width: 100%;
    margin: 0 auto 2rem;
    padding: 1.25rem 1.75rem;
    border-radius: .5rem;
    text-align: left;
}

.lwptoc_items { columns: 2; column-gap: 2.5rem; }
.lwptoc_itemWrap { padding-left: 0; }

div.lwptoc_item {
    margin-left: 0;
    line-height: 1.9;
    break-inside: avoid;
}
div.lwptoc_item:before { left: 0; margin-right: .55em; }

.lwptoc a.lwptoc_item {
    text-decoration: none;
    font-size: .9375rem;
    transition: color .15s ease, opacity .15s ease;
}

/* on the dark hero unit */
#hero-unit .lwptoc {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .15);
}
#hero-unit div.lwptoc_item:before { color: #fff; opacity: .4; }
#hero-unit .lwptoc a.lwptoc_item { color: #fff; opacity: .88; }

/* on a light section (only touch-vpn-review keeps its own #toc_container) */
#toc_container {
    width: 42.5rem;
    max-width: 100%;
    margin: 2rem auto;
}
#toc_container .toc_title {
    font-size: 1.125rem;
    margin: 0 0 .75rem;
    color: #132846;
    text-align: left;
}
#toc_container .lwptoc {
    margin: 0;
    background: #fff;
    border: 1px solid #e3e8ee;
}
#toc_container div.lwptoc_item:before { color: #132846; opacity: .35; }
#toc_container .lwptoc a.lwptoc_item { color: #2b6c9d; }

@media (max-width: 40rem) {
    .lwptoc_items { columns: 1; }
    .lwptoc { padding: 1rem 1.25rem; }
}

/* the 2026 fact block added to review pages */
p.update-2026 { opacity: 1 !important; }
#hero-unit p.update-2026 strong { color: #7fd3f7; }

/* faq and touch-vpn-review carry a hand-written in-page nav list in the hero
   instead of a plugin TOC block; give it the same panel treatment so the two
   kinds of contents list look alike. */
#hero-unit ul:not([class]) {
    list-style: none;
    width: 42.5rem;
    max-width: 100%;
    margin: 0 auto 2rem;
    padding: 1.25rem 1.75rem;
    border-radius: .5rem;
    text-align: left;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .15);
    columns: 2;
    column-gap: 2.5rem;
}
#hero-unit ul:not([class]) li {
    line-height: 1.9;
    break-inside: avoid;
}
#hero-unit ul:not([class]) li:before {
    content: '•';
    color: #fff;
    opacity: .4;
    margin-right: .55em;
}
#hero-unit ul:not([class]) a {
    color: #fff;
    opacity: .88;
    text-decoration: none;
    font-size: .9375rem;
}

/* The iOS row's glyph was the stylised "iOS 12" logotype, so dropping the
   version from the label left the digits dangling. Repointed to a plain Apple
   mark, cropped to the glyph (418x512) and sized to 55% of the 30px slot
   height so it carries the same visual weight as the Windows and Android
   icons beside it; the width follows the aspect ratio. */
/* Selector mirrors the theme's own `ul.platforms li.icon-ios12:after`: a bare
   .icon-ios12:after loses on specificity no matter how late it is loaded. */
ul.platforms li.icon-ios12:after {
    background-image: url("../img/ios-icon.png");
    background-size: 44.9% 55%;
}

/* Internal linking block: listicle -> reviews, review -> adjacent reviews.
   The theme ships no compact review-list component (only a stray logo rule for
   .review-tiny survived the capture), so this is styled from scratch to match
   the card language: white panel, navy text, blue accent. */
.related-reviews {
    max-width: 71.25rem;
    margin: 0 auto 2.5rem;
    padding: 0 .9375rem;
}
.related-reviews__title {
    font-size: 1.25rem;
    color: #132846;
    margin: 0 0 1rem;
}
.related-reviews__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.related-reviews__item {
    flex: 1 1 14rem;
    min-width: 0;
}
.related-reviews__item > a {
    display: flex;
    align-items: center;
    gap: .875rem;
    background: #fff;
    border: 1px solid #e3e8ee;
    border-top: .1875rem solid #132846;
    padding: .875rem 1rem;
    text-decoration: none;
    color: #47576f;
    transition: box-shadow .15s ease, transform .15s ease;
}
.related-reviews__item > a:hover {
    box-shadow: 0 .375rem 1.25rem rgba(19, 40, 70, .12);
    transform: translateY(-1px);
}
.related-reviews__logo {
    flex: 0 0 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.related-reviews__logo img,
.related-reviews__logo svg {
    max-width: 100%;
    max-height: 100%;
}
.related-reviews__name {
    flex: 1 1 auto;
    font-weight: 600;
    color: #132846;
    line-height: 1.3;
}
.related-reviews__score {
    flex: 0 0 auto;
    font-weight: 700;
    font-size: 1.0625rem;
    color: #2b6c9d;
}
@media (max-width: 40rem) {
    .related-reviews__list { flex-direction: column; }
}

/* Links: never underlined, and no colour shift on hover.
   Neutralised sources: bootstrap's a:hover (underline + #0056b3) and the
   theme's .button:hover repaints. Each hover value is restored to that
   element's own idle value rather than blanket-reset, so the resting look is
   untouched - including the deliberately red CTA of the .special-offer card,
   whose #e7553b is its normal colour and not a hover effect. */
a, a:link, a:visited, a:hover, a:focus, a:active,
.button, .button:hover, .button:focus, .button:active {
    text-decoration: none !important;
}

a:hover, a:focus, a:active { color: #36a9e0; }

/* contexts with their own idle colour, pinned so the rule above cannot hijack them */
.topmenu ul li a:hover, ul#main-menu li a:hover { color: #a8b7c2; }
#main-footer ul.footer-menu li ul li a:hover,
#main-footer ul.footer-menu li .submenu a:hover { color: #a8b7c2; }
#main-footer ul.footer-menu a:hover { color: #fff; }
.blog_items .heading a:hover { color: #000; }
#cookie-consent a:hover { color: #000; }
.exit-popup .exit-popup-contents a:hover { color: #c8242c; }
#special-offer .button-dismiss:hover { color: hsla(0, 0%, 100%, .5); }

/* buttons keep their idle background on hover */
.button:hover, .button:focus { color: #fff; background: #36a9e0; }
.special-offer .button:hover, .special-offer .button:focus { background: #e7553b; }
#special-offer .button:hover, #special-offer .button:focus { background: #00c75b; }
.exit-popup .exit-popup-contents .content .button:hover,
.exit-popup .exit-popup-contents .content .button:focus { background: #c8242c; }

/* the related-reviews cards keep their lift, which is not a colour change */
.related-reviews__item > a:hover .related-reviews__name { color: #132846; }
.related-reviews__item > a:hover .related-reviews__score { color: #2b6c9d; }

/* Shorter hero on the homepage. The theme sets .home #hero-unit-container to
   45rem with no media query; below 767px a separate !important rule zeroes it,
   and that still wins, so mobile behaviour is unchanged.
   At 25rem the hero's own content (237px) no longer clears the first review
   card, which is pulled ~104px up into the hero by design - the second
   paragraph ended 22px below the card's top edge. The slack comes from the
   h1's 5rem top margin, trimmed here just enough to fit. */
.home #hero-unit-container {
    min-height: 25rem;
}
/* Desktop only: below 768px the theme already sets margin-top:0, and an
   unscoped override added 40px back on mobile. */
@media only screen and (min-width: 768px) {
    .home #hero-unit h1 {
        margin-top: 2.5rem;
    }
}

/* Numbered provider headings: the marker of <ol><li class="numbered-heading"><h2>Name</h2></li></ol>
   took the list's font size, so "1." was tiny beside a 45px heading. Sized to
   the heading at both breakpoints (the theme drops h2 to 1.375rem below 768px);
   the heading keeps its own size, so the two now match. */
li.numbered-heading {
    font-size: 2.8125rem;
    line-height: 1.15;
    align-items: baseline;
}
@media only screen and (max-width: 767px) {
    li.numbered-heading { font-size: 1.375rem; }
}

/* Blog listing thumbnails. The supplied images come in three aspect ratios
   (3:2, 16:9 and one portrait 4:5), so a fixed box with object-fit keeps the
   grid even without cropping the files themselves. */
.blog_items .inner > a {
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
}
.blog_items .inner > a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* The review list is pulled 6.5625rem up into the hero
   (.container.review-list-container { margin-top: -6.5625rem }), which the
   theme could afford because the hero used to end in a line of text. The
   contents panel styled above is taller than that, so the card was covering
   its last rows. Panels that sit inside the hero reserve the pulled-up height
   plus a visual gap; the one on the light section (#toc_container) is not
   affected and keeps its own spacing. */
#hero-unit .lwptoc,
#hero-unit ul:not([class]) {
    margin-bottom: 7.75rem;
}

/* Compatibility list. The icon is a 30px ::after pseudo-element while the label
   keeps the global li line-height of 17px, and the flex container had no
   align-items, so every label sat near the top of its icon instead of beside
   its centre. */
ul.platforms li {
    align-items: center;
}

/* macOS gets the Finder icon: the theme used the same Apple mark as iOS, and
   after the iOS row was repointed to that mark the two rows were identical.
   Selector mirrors the theme's own so it wins on specificity. */
ul.platforms li.icon-macos:after {
    background-image: url("../img/macos-icon.png");
    background-size: 62% 62%;
}

/* Prose lists. The theme sets a fixed li{line-height:17px}, which suits the
   compact lists inside review cards but crams CJK text in article body copy —
   16px glyphs need roughly 22-24px of line box. Scoped to .background-2, the
   article wrapper, so card lists (.review, ul.platforms) keep their own
   spacing; numbered provider headings keep theirs too. */
.container.background-2 ul > li:not(.numbered-heading),
.container.background-2 ol > li:not(.numbered-heading) {
    line-height: 1.7;
    padding: .1rem 0;
}

/* Headings on the generated long-form pages (about-us, terms, privacy-policy).
   The theme gives .background-2 h2 45px with 45px of margin above AND below.
   That reads as a section banner, which is right for a listicle with a handful
   of provider blocks, but a 28-section policy needs headings that read as
   headings next to 16px body copy — at 45px each one is a full screen of
   scrolling on its own, and the symmetric margin detaches it from the text it
   introduces. So: smaller, bolder to keep the hierarchy without the size, and
   asymmetric margin so a heading sits with its own paragraph. Scoped to
   .doc-page, so the 53 archived pages keep the theme's proportions untouched. */
.doc-page .container.background-2 h2 {
    font-size: 1.75rem;
    line-height: 1.4;
    font-weight: 600;
    margin: 2.5rem 0 .75rem;
}

.doc-page .container.background-2 h3 {
    font-size: 1.1875rem;
    line-height: 1.45;
    font-weight: 600;
    margin: 1.75rem 0 .5rem;
}

/* the first heading already has the container's own top padding above it */
.doc-page .container.background-2 h2:first-child {
    margin-top: 0;
}