/* ================================================
   Print Stylesheet — vpn.com
   ================================================
   Optimized for clean, readable printed output.
   Hides all interactive/navigational chrome.
   Opens collapsed content. Constrains tables.
   ================================================ */

@media print {

  /* ── Reset to clean base ──────────────────────── */
  * {
    box-shadow: none !important;
    text-shadow: none !important;
  }

  html {
    font-size: 12pt;
  }

  body {
    color: #000 !important;
    background: #fff !important;
    line-height: 1.5;
  }

  /* ── Hide: navigation & chrome ────────────────── */
  header,
  footer,
  nav,
  .submenu,
  #floating-nav,
  .share-row,
  .popup-overlay,
  .sticky-float-cta,
  .sidebar-cta-card,
  [data-popup],
  [data-theme-toggle] {
    display: none !important;
  }

  /* ── Hide: interactive & promotional ──────────── */
  .btn-solid,
  .btn-ghost,
  a[data-track-affiliate],
  .logo-scroll-track,
  #load-more-wrap,
  #post-grid,
  .glow-blob,
  [class*="blob"],
  [class*="animate-"] {
    display: none !important;
  }

  /* ── Hide: related content sections ───────────── */
  section:has(#post-grid),
  section:has(.logo-scroll-track),
  section:has([data-post-card]) {
    display: none !important;
  }

  /* ── Hide: provider grid (Compare Other) ──────── */
  section:has(.provider-grid-card) {
    display: none !important;
  }
  /* Fallback for browsers without :has() */
  .provider-grid-card {
    display: none !important;
  }

  /* ── Hide: sidebar ────────────────────────────── */
  aside {
    display: none !important;
  }

  /* ── Layout: full width for content ───────────── */
  .max-w-container,
  .max-w-content,
  .max-w-editorial,
  .max-w-3xl {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .flex.justify-between.gap-16 {
    display: block !important;
  }

  .editorial-prose,
  .editorial-prose.prose {
    max-width: 100% !important;
  }

  /* ── ALL sections: kill large padding ─────────── */
  section {
    padding-top: 10pt !important;
    padding-bottom: 10pt !important;
    min-height: 0 !important;
    background: none !important;
    overflow: visible !important;
  }

  /* ── Hero: extra compact ────────────────────── */
  #main-content > section:first-child,
  #main-content > article > header,
  section[id="overview"] {
    padding: 8pt 0 4pt !important;
    border: none !important;
  }

  .hero-title,
  .hero-title-sub {
    font-size: 20pt !important;
    margin-bottom: 4pt !important;
  }

  .text-display {
    font-size: 20pt !important;
  }

  .eyebrow {
    display: none !important;
  }

  /* Score badge: inline, no box */
  .rounded-pill {
    border-radius: 0 !important;
    border: none !important;
    background: none !important;
    padding: 0 !important;
    display: inline !important;
  }

  /* ── Typography: black text, no theme colors ──── */
  h1, h2, h3, h4, h5, h6 {
    color: #000 !important;
    page-break-after: avoid;
    break-after: avoid;
  }

  p, li, td, th, span, div {
    color: #1a1a1a !important;
  }

  .text-muted {
    color: #666 !important;
  }

  /* ── Links: show URL after link text ──────────── */
  .editorial-prose a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #666;
    word-break: break-all;
  }

  .editorial-prose a[href^="/"]::after {
    content: " (vpn.com" attr(href) ")";
    font-size: 9pt;
    color: #666;
  }

  a {
    color: #000 !important;
    text-decoration: underline !important;
  }

  /* ── Tables: fit on page ──────────────────────── */
  table {
    width: 100% !important;
    min-width: 0 !important;
    font-size: 9pt !important;
    border-collapse: collapse !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  th, td {
    padding: 4pt 6pt !important;
    border: 0.5pt solid #ccc !important;
    background: none !important;
  }

  th {
    background: #f5f5f5 !important;
    font-weight: bold !important;
  }

  /* SpeedLab table: show all columns */
  [data-speedlab-table] {
    min-width: 0 !important;
  }

  .hidden.md\:table-cell,
  .hidden.lg\:table-cell,
  .hidden.sm\:table-cell {
    display: table-cell !important;
  }

  /* ── Compare tables: no sticky, no scroll ─────── */
  .overflow-x-auto {
    overflow: visible !important;
  }

  /* ── FAQs & details: flatten to plain text ────── */
  details {
    display: block !important;
    border: none !important;
    border-radius: 0 !important;
    margin-bottom: 6pt;
  }

  details > summary {
    display: block !important;
    cursor: default;
    font-weight: bold;
    padding: 0 !important;
    list-style: none !important;
  }

  details > summary svg {
    display: none !important;
  }

  details > summary::marker,
  details > summary::-webkit-details-marker {
    display: none !important;
  }

  /* Force content visible regardless of open state */
  details > div,
  details > section,
  details > p {
    display: block !important;
    padding: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }

  .review-details {
    border: none !important;
    padding-top: 4pt !important;
  }

  .review-details-toggle {
    display: none !important;
  }

  .review-details-content {
    display: block !important;
    padding-top: 0 !important;
  }

  /* ── Review cards: simplify borders ───────────── */
  .review-card {
    border: 0.5pt solid #ccc !important;
    page-break-inside: avoid;
    break-inside: avoid;
    margin-bottom: 12pt;
  }

  .review-card-header {
    background: #f9f9f9 !important;
    border-bottom: 0.5pt solid #ccc !important;
  }

  /* ── Chips: remove colors, just border ────────── */
  .review-chip,
  .review-chip--green,
  .review-chip--neutral,
  .review-chip--red {
    background: none !important;
    border: 0.5pt solid #ccc !important;
    color: #000 !important;
  }

  /* ── Images: constrain & grayscale ────────────── */
  img {
    max-width: 100% !important;
    height: auto !important;
    filter: grayscale(100%);
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Provider icons: keep small */
  img[src*="providers"] {
    width: 24px !important;
    height: 24px !important;
    filter: none;
  }

  /* ── Backgrounds & decorative elements: strip ── */
  .bg-surface-0,
  .bg-surface-1,
  .bg-surface-2,
  [class*="bg-gradient"],
  [class*="bg-glow"],
  [class*="bg-surface"] {
    background: none !important;
  }

  /* Blob backgrounds — these are large absolute divs that eat print pages */
  [aria-hidden="true"] {
    display: none !important;
  }

  /* Remove positioning that only exists for blob containment */
  section {
    position: static !important;
    overflow: visible !important;
  }

  .relative {
    position: static !important;
  }

  .z-10 {
    z-index: auto !important;
  }

  /* ── Borders: remove on sections, lighten elsewhere ── */
  section {
    border: none !important;
  }

  .border-border-1,
  .border-border-2,
  [class*="border-border"] {
    border-color: #ddd !important;
  }

  /* Kill any min-height on heroes */
  [class*="min-h"] {
    min-height: 0 !important;
  }

  /* ── Spacing: tighten for paper ───────────────── */
  .mb-8, .mb-10, .mb-12, .mb-14, .mb-16 {
    margin-bottom: 8pt !important;
  }

  div[class*="pt-"], div[class*="pb-"],
  div[class*="py-"] {
    padding-top: 8pt !important;
    padding-bottom: 8pt !important;
  }

  /* ── Page breaks ──────────────────────────────── */
  h1, h2, h3 {
    page-break-after: avoid;
    break-after: avoid;
  }

  /* DO NOT avoid breaks inside sections — long sections must break */
  /* Only avoid break-after on the hero so content follows immediately */
  #main-content > section:first-child {
    page-break-after: avoid;
    break-after: avoid;
  }

  /* Long sections can break */
  .editorial-prose {
    page-break-inside: auto;
    break-inside: auto;
  }

  /* ── Print footer: show URL ───────────────────── */
  body::after {
    content: "Printed from vpn.com — " attr(data-url);
    display: block;
    text-align: center;
    font-size: 9pt;
    color: #999;
    margin-top: 24pt;
    padding-top: 12pt;
    border-top: 0.5pt solid #ddd;
  }

  /* ── Score badge: print-friendly ──────────────── */
  .rounded-pill {
    border-radius: 0 !important;
    border: 0.5pt solid #ccc !important;
    background: none !important;
  }

  /* ── Plan cards: stack vertically if needed ────── */
  .grid[class*="grid-cols"] {
    page-break-inside: avoid;
    break-inside: avoid;
  }
}