/* =====================================================
   CYBERPROBD — Print Stylesheet
   Author: MD Abu Bokkar
   Version: v12.0 — Complete Rewrite
   Build: January 2026

   🎯 PURPOSE:
   This stylesheet ONLY applies when user prints (Ctrl+P).
   It makes all pages print-friendly:
   - Removes navbar, buttons, animations
   - Simplifies colors to black/white
   - Optimizes typography for paper (serif fonts)
   - Shows link URLs after text
   - Manages page breaks
   - Adds print header + footer

   📌 HOW IT'S INCLUDED:
   <link rel="stylesheet" href="css/print.css" media="print">

   The `media="print"` attribute means zero performance
   cost during normal browsing.

   🖨️ PERFECT FOR:
   - Blog posts (readers can print to PDF)
   - Legal pages (privacy, terms)
   - About page (as a resume/CV)
   - Portfolio (as a PDF export)
   ===================================================== */

/* ============================================
   1. HIDE ALL NON-CONTENT ELEMENTS
   ============================================ */
@media print {
  /* Navigation */
  .navbar,
  .nav-menu,
  .nav-toggle,
  .nav-search-btn,
  .lang-toggle,
  .live-clock,
  .theme-toggle,
  .nav-right,
  .nav-menu-search,

  /* Mobile bottom nav */
  .mobile-nav,
  .mobile-nav-list,
  .mobile-nav-item,
  .mobile-nav-link,

  /* Floating elements */
  .float-btn,
  .float-top,
  .wa-widget,
  .wa-widget-toggle,
  .wa-widget-box,
  .ambient-glow,
  .cursor-dot,
  .cursor-ring,

  /* Decorative */
  .preloader,
  .scroll-progress,
  .reading-progress,
  .aurora,
  .aurora-blob,
  .orb,
  .hero-grid,
  .hero-bg,
  .page-hero-bg,
  .float-card,
  .float-card-1,
  .float-card-2,

  /* Interactive overlays */
  .cmd-palette,
  .cmd-overlay,
  .project-modal,
  .project-modal-overlay,
  .project-modal-box,
  .project-modal-close,

  /* TradingView widgets */
  .tradingview-widget-container,
  .tv-chart-main,
  .tv-chart-card,
  .tv-charts-grid,
  .tv-fullscreen-btn,
  .tv-chart-header,
  .tv-chart-actions,

  /* Blog interactive */
  .post-share,
  .post-nav,
  .related-posts,
  .newsletter-box,
  .newsletter-form,
  .post-toc,
  .reading-progress,
  .code-copy-btn,
  .heading-anchor,

  /* Form UI */
  .contact-form,
  .form-alt,

  /* Navigation-related */
  .err-actions,
  .err-suggest,

  /* CTA sections (buttons useless on paper) */
  .cta-section,
  .cta-banner,
  .cta-buttons,
  .service-cta,
  .company-actions,
  .about-actions,
  .featured-tool-actions,

  /* Footer interactive */
  .footer-socials-row,
  .fbb-top,
  .fbb-right,

  /* Marquee */
  .trust-strip,
  .client-logos-section,
  .marquee-track,
  .client-logos-marquee,

  /* Filter buttons */
  .filter-bar,
  .blog-cat-filter,

  /* Social icons */
  .fs-icon,

  /* Background blobs */
  .page-hero-bg .orb,
  .hero-bg .orb,

  /* Video/embedded */
  iframe,
  video,
  audio,

  /* Hide animations/pulse dots */
  .badge-dot,
  .live-dot,
  .status-dot,
  .clock-dot {
    display: none !important;
  }
}

/* ============================================
   2. BASE TYPOGRAPHY
   ============================================ */
@media print {
  @page {
    margin: 1.6cm 1.4cm;
    size: A4 portrait;
  }

  @page :first {
    margin-top: 1.2cm;
  }

  html {
    font-size: 11.5pt !important;
    scroll-behavior: auto !important;
  }

  body {
    background: #ffffff !important;
    color: #000000 !important;
    font-family: 'Georgia', 'Times New Roman', serif !important;
    font-size: 11.5pt !important;
    line-height: 1.6 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    max-width: 100% !important;
    /* Remove bottom nav padding for print */
    padding-bottom: 0 !important;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: 'Georgia', 'Times New Roman', serif !important;
    color: #000000 !important;
    page-break-after: avoid;
    page-break-inside: avoid;
    letter-spacing: 0 !important;
    line-height: 1.3 !important;
  }

  h1 { font-size: 22pt !important; margin: 0 0 12pt 0 !important; }
  h2 { font-size: 17pt !important; margin: 18pt 0 8pt 0 !important; }
  h3 { font-size: 14pt !important; margin: 14pt 0 6pt 0 !important; }
  h4 { font-size: 12pt !important; margin: 12pt 0 4pt 0 !important; }
  h5, h6 { font-size: 11pt !important; margin: 10pt 0 4pt 0 !important; }

  p {
    margin: 0 0 10pt 0 !important;
    orphans: 3;
    widows: 3;
    color: #1a1a1a !important;
  }

  strong, b {
    color: #000000 !important;
    font-weight: 700 !important;
  }

  em, i {
    font-style: italic !important;
  }

  /* Links */
  a {
    color: #000000 !important;
    text-decoration: underline !important;
    text-decoration-color: #666666 !important;
  }

  a[href^="http"]:not([href*="cyberprobd.online"])::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #555555;
    font-family: 'Georgia', serif;
    font-style: italic;
    word-break: break-all;
  }

  /* Hide URLs for internal links */
  a[href^="https://cyberprobd.online"]::after,
  a[href^="/"]::after,
  a[href^="#"]::after,
  a[href^="mailto:"]::after,
  a[href^="tel:"]::after,
  a[href^="https://wa.me"]::after {
    content: "" !important;
  }

  /* Email link special */
  a[href^="mailto:"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #555555;
  }
}

/* ============================================
   3. GRADIENT TEXT → SOLID BLACK
   ============================================ */
@media print {
  .gradient-text,
  [class*="gradient-text"],
  .hero-line-2,
  #typeText,
  .stat-num,
  .stat-suf,
  .stat-strip-num,
  .stat-big-num,
  .process-num,
  .story-num,
  .about-badge-num,
  .err-code {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: #000000 !important;
    color: #000000 !important;
  }

  .err-code {
    font-size: 60pt !important;
    text-align: center !important;
    margin: 20pt 0 !important;
    border: 2px solid #000 !important;
    padding: 20pt !important;
    border-radius: 8pt !important;
  }
}

/* ============================================
   4. LAYOUT — Simplify Grids
   ============================================ */
@media print {
  .container {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .section,
  .service-section,
  .company-section {
    padding: 12pt 0 !important;
    page-break-inside: auto;
    border: none !important;
    background: none !important;
  }

  .section-alt {
    background: none !important;
  }

  /* Hero sections */
  .hero,
  .page-hero,
  .post-hero {
    padding: 0 0 12pt 0 !important;
    min-height: auto !important;
    text-align: left !important;
    page-break-after: avoid;
  }

  .hero-container,
  .page-hero-container,
  .post-hero + .container {
    display: block !important;
    text-align: left !important;
  }

  .hero-title {
    font-size: 20pt !important;
    margin: 0 0 8pt 0 !important;
  }

  .hero-line-1,
  .hero-line-2 {
    display: inline !important;
    margin: 0 !important;
  }

  .hero-line-1::after {
    content: " ";
  }

  .hero-roles {
    font-size: 13pt !important;
    margin: 0 0 8pt 0 !important;
    color: #333 !important;
  }

  .type-cursor { display: none !important; }

  .hero-description,
  .page-hero-sub,
  .section-sub {
    font-size: 11pt !important;
    color: #333 !important;
    max-width: 100% !important;
    margin: 0 0 10pt 0 !important;
  }

  .hero-badge,
  .section-tag {
    background: none !important;
    border: 1px solid #666 !important;
    color: #333 !important;
    padding: 2pt 6pt !important;
    font-size: 8pt !important;
    margin-bottom: 8pt !important;
  }

  /* Stack all grids into single column */
  .about-grid,
  .skills-grid,
  .skills-categories,
  .services-grid-home,
  .services-grid,
  .ventures-grid,
  .projects-grid,
  .projects-grid-compact,
  .project-types-grid,
  .case-study,
  .testimonials-grid,
  .values-grid,
  .stats-big-grid,
  .stats-strip-grid,
  .process-grid,
  .connection-grid,
  .online-services-grid,
  .company-grid,
  .company-services-grid,
  .eco-materials-grid,
  .featured-tool,
  .trading-story,
  .blog-grid,
  .blog-featured,
  .related-posts-grid,
  .quick-nav-grid,
  .contact-grid,
  .contact-cards-grid,
  .footer-main,
  .service-items-grid,
  .tv-charts-grid,
  .search-results {
    display: block !important;
    grid-template-columns: none !important;
    gap: 8pt !important;
  }

  /* Grid children — full width */
  .about-grid > *,
  .skills-grid > *,
  .services-grid-home > *,
  .ventures-grid > *,
  .projects-grid > *,
  .testimonials-grid > *,
  .values-grid > *,
  .stats-big-grid > *,
  .process-grid > *,
  .connection-grid > *,
  .online-services-grid > *,
  .company-grid > *,
  .blog-grid > *,
  .related-posts-grid > *,
  .blog-featured > *,
  .case-study > *,
  .featured-tool > * {
    display: block !important;
    width: 100% !important;
    margin-bottom: 10pt !important;
    page-break-inside: avoid;
  }
}

/* ============================================
   5. CARDS & BOXES
   ============================================ */
@media print {
  .value-card,
  .stat-big,
  .service-home-card,
  .service-item,
  .online-service-card,
  .process-step,
  .story-block,
  .connection-card,
  .testimonial-card,
  .timeline-content,
  .cs-item,
  .eco-mat,
  .venture-card,
  .project-card,
  .blog-card,
  .skill-card,
  .skill-category,
  .quick-nav-card,
  .cs-details,
  .about-badge,
  .featured-tool-visual,
  .case-study-visual,
  .company-visual,
  .about-image-wrap,
  .profile-card,
  .contact-big-card,
  .location-card,
  .biz-card-full-inner,
  .post-author,
  .project-type-card,
  .cs-detail {
    background: #ffffff !important;
    border: 1px solid #cccccc !important;
    box-shadow: none !important;
    padding: 8pt 10pt !important;
    margin-bottom: 8pt !important;
    page-break-inside: avoid;
    transform: none !important;
    border-radius: 4pt !important;
  }

  /* Icons — show as inline badges */
  .value-icon,
  .service-home-icon,
  .service-header-icon,
  .si-icon,
  .osc-icon,
  .connection-icon,
  .pt-icon,
  .about-badge-num,
  .cs-icon,
  .eco-mat-icon,
  .venture-icon,
  .cbc-icon,
  .location-icon,
  .float-icon,
  .qnc-icon,
  .company-logo-badge,
  .logo-badge,
  .fm-logo-badge,
  .post-author-avatar,
  .client-av,
  .check,
  .tf-check,
  .pm-feature-check,
  .card-photo-ring,
  .card-photo {
    display: none !important;
  }

  /* Feature check */
  .about-item .check::before {
    content: "✓ ";
    font-weight: bold;
    color: #000;
    margin-right: 4pt;
  }

  .tool-feature .tf-check::before {
    content: "✓ ";
    font-weight: bold;
    color: #000;
    margin-right: 4pt;
  }
}

/* ============================================
   6. IMAGES
   ============================================ */
@media print {
  img {
    max-width: 100% !important;
    height: auto !important;
    page-break-inside: avoid;
    border: 1px solid #cccccc !important;
    border-radius: 3pt !important;
  }

  /* Hide decorative */
  .profile-card,
  .profile-image,
  .profile-header,
  .profile-footer,
  .float-card {
    display: none !important;
  }

  /* About image — smaller */
  .about-image-wrap {
    max-width: 200pt !important;
    margin: 0 0 10pt 0 !important;
  }

  .about-image-wrap img {
    border: none !important;
  }

  /* Visuals */
  .company-visual,
  .featured-tool-visual,
  .case-study-visual,
  .venture-thumb,
  .project-thumb {
    max-width: 100% !important;
    max-height: 180pt !important;
    overflow: hidden !important;
    margin-bottom: 8pt !important;
  }

  /* Blog thumbnails hide */
  .blog-thumb,
  .blog-featured-visual,
  .pm-hero {
    display: none !important;
  }
}

/* ============================================
   7. STATS — Simple Format
   ============================================ */
@media print {
  .stat,
  .stat-big,
  .stat-strip-item {
    display: inline-block !important;
    margin-right: 20pt !important;
    margin-bottom: 8pt !important;
    text-align: left !important;
  }

  .stat-num,
  .stat-suf,
  .stat-strip-num,
  .stat-big-num {
    font-size: 16pt !important;
    display: inline !important;
    color: #000 !important;
  }

  .stat-label,
  .stat-strip-label,
  .stat-big-label {
    font-size: 9pt !important;
    color: #333 !important;
    display: inline !important;
    margin-left: 4pt !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
  }

  .stat-divider {
    display: none !important;
  }

  .hero-stats {
    border-top: 1px solid #ccc !important;
    padding-top: 8pt !important;
    margin-top: 8pt !important;
  }
}

/* ============================================
   8. TABLES
   ============================================ */
@media print {
  table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 8pt 0 !important;
    page-break-inside: avoid;
  }

  table th {
    background: #f0f0f0 !important;
    color: #000 !important;
    border: 1px solid #999 !important;
    padding: 6pt !important;
    font-weight: bold !important;
    text-align: left !important;
    font-size: 10pt !important;
  }

  table td {
    border: 1px solid #999 !important;
    padding: 6pt !important;
    font-size: 10pt !important;
    color: #1a1a1a !important;
  }

  table tr {
    page-break-inside: avoid;
  }

  table tr:nth-child(even) td {
    background: #f9f9f9 !important;
  }
}

/* ============================================
   9. FAQ / Accordion — Always Expanded
   ============================================ */
@media print {
  .faq-item {
    border: 1px solid #ccc !important;
    background: #ffffff !important;
    margin-bottom: 8pt !important;
    page-break-inside: avoid;
  }

  .faq-item.active {
    border-color: #000 !important;
    box-shadow: none !important;
  }

  .faq-q {
    padding: 8pt 10pt !important;
    background: #f0f0f0 !important;
    cursor: default !important;
  }

  .faq-text {
    font-size: 11pt !important;
    color: #000 !important;
    font-weight: bold !important;
  }

  .faq-icon {
    display: none !important;
  }

  .faq-num {
    color: #555 !important;
  }

  .faq-a {
    max-height: none !important;
    overflow: visible !important;
    display: block !important;
  }

  .faq-a p {
    padding: 8pt 10pt !important;
    font-size: 10.5pt !important;
    color: #1a1a1a !important;
  }
}

/* ============================================
   10. TIMELINE
   ============================================ */
@media print {
  .timeline {
    padding-left: 0 !important;
    max-width: 100% !important;
  }

  .timeline::before,
  .timeline-dot {
    display: none !important;
  }

  .timeline-item {
    padding-bottom: 12pt !important;
    border-left: 2pt solid #333 !important;
    padding-left: 10pt !important;
    margin-bottom: 8pt !important;
    page-break-inside: avoid;
  }

  .timeline-content {
    border: none !important;
    border-left: none !important;
    padding: 0 !important;
    background: none !important;
    box-shadow: none !important;
  }

  .timeline-year {
    background: #000 !important;
    color: #fff !important;
    padding: 2pt 8pt !important;
    font-size: 9pt !important;
    display: inline-block !important;
    margin-bottom: 4pt !important;
    border-radius: 3pt !important;
  }

  .timeline-content h3 {
    font-size: 12pt !important;
    margin: 4pt 0 !important;
  }

  .timeline-content p {
    font-size: 10.5pt !important;
    color: #1a1a1a !important;
  }
}

/* ============================================
   11. BLOG POST
   ============================================ */
@media print {
  .post-hero {
    padding: 0 0 10pt 0 !important;
    border-bottom: 2pt solid #000 !important;
    margin-bottom: 12pt !important;
    text-align: left !important;
  }

  .post-hero-cat {
    background: none !important;
    border: 1px solid #333 !important;
    color: #000 !important;
    padding: 2pt 8pt !important;
    font-size: 9pt !important;
    margin-bottom: 8pt !important;
  }

  .post-hero-title {
    font-size: 20pt !important;
    line-height: 1.25 !important;
    margin: 0 0 8pt 0 !important;
    text-align: left !important;
  }

  .post-meta {
    justify-content: flex-start !important;
    font-size: 9.5pt !important;
    color: #555 !important;
    gap: 12pt !important;
  }

  .post-body {
    max-width: 100% !important;
    font-size: 11pt !important;
    line-height: 1.65 !important;
    color: #1a1a1a !important;
    padding: 0 !important;
  }

  .post-body h2 {
    font-size: 15pt !important;
    margin: 16pt 0 6pt 0 !important;
    page-break-after: avoid;
  }

  .post-body h3 {
    font-size: 12.5pt !important;
    margin: 12pt 0 4pt 0 !important;
    page-break-after: avoid;
  }

  .post-body p { margin-bottom: 8pt !important; }

  .post-body ul,
  .post-body ol {
    padding-left: 18pt !important;
    margin-bottom: 10pt !important;
  }

  .post-body li {
    margin-bottom: 4pt !important;
    font-size: 11pt !important;
  }

  .post-body blockquote {
    border-left: 3pt solid #333 !important;
    background: #f5f5f5 !important;
    padding: 8pt 12pt !important;
    margin: 10pt 0 !important;
    font-style: italic !important;
    page-break-inside: avoid;
  }

  .post-body code {
    background: #f0f0f0 !important;
    color: #000 !important;
    padding: 1pt 4pt !important;
    border: 1px solid #ccc !important;
    font-family: 'Courier New', monospace !important;
    font-size: 10pt !important;
  }

  .post-body pre {
    background: #f5f5f5 !important;
    border: 1px solid #999 !important;
    padding: 8pt 10pt !important;
    font-family: 'Courier New', monospace !important;
    font-size: 9.5pt !important;
    page-break-inside: avoid;
    overflow: visible !important;
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
  }

  .post-body img {
    max-width: 80% !important;
    margin: 8pt auto !important;
    display: block !important;
  }

  /* Author box */
  .post-author {
    border-top: 2pt solid #000 !important;
    border-bottom: 2pt solid #000 !important;
    border-left: none !important;
    border-right: none !important;
    background: none !important;
    padding: 8pt 0 !important;
    margin-top: 16pt !important;
  }

  .post-author-avatar {
    display: none !important;
  }

  .post-author-info h4 {
    font-size: 12pt !important;
    margin: 0 0 4pt 0 !important;
  }

  .post-author-info p {
    font-size: 10pt !important;
    color: #333 !important;
  }

  .post-author-info a {
    font-size: 10pt !important;
    color: #000 !important;
  }
}

/* ============================================
   12. LEGAL PAGES
   ============================================ */
@media print {
  .legal-content {
    max-width: 100% !important;
    padding: 0 !important;
  }

  .legal-intro {
    background: #f5f5f5 !important;
    border: 1px solid #999 !important;
    border-left: 4pt solid #000 !important;
    padding: 10pt 12pt !important;
    margin-bottom: 14pt !important;
    font-size: 10.5pt !important;
    color: #1a1a1a !important;
  }

  .legal-section {
    margin-bottom: 14pt !important;
    page-break-inside: avoid;
  }

  .legal-section h2 {
    font-size: 13pt !important;
    margin: 0 0 6pt 0 !important;
    padding-bottom: 4pt !important;
    border-bottom: 1px solid #999 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6pt !important;
  }

  .legal-num {
    background: #000 !important;
    color: #fff !important;
    width: 20pt !important;
    height: 20pt !important;
    border-radius: 3pt !important;
    font-size: 9pt !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .legal-section p {
    font-size: 10.5pt !important;
    line-height: 1.65 !important;
    margin-bottom: 8pt !important;
    color: #1a1a1a !important;
  }

  .legal-section ul {
    padding-left: 0 !important;
  }

  .legal-section ul li {
    padding-left: 18pt !important;
    font-size: 10.5pt !important;
    margin-bottom: 4pt !important;
    color: #1a1a1a !important;
    position: relative;
    list-style: none;
  }

  .legal-section ul li::before {
    content: "•";
    position: absolute;
    left: 4pt;
    top: 0;
    color: #000;
    font-weight: bold;
    font-size: 13pt;
  }

  .legal-updated {
    background: #f5f5f5 !important;
    border: 1px solid #999 !important;
    padding: 6pt 10pt !important;
    font-size: 9pt !important;
    color: #333 !important;
    text-align: center !important;
    margin-top: 14pt !important;
  }
}

/* ============================================
   13. FOOTER
   ============================================ */
@media print {
  .footer {
    background: #f5f5f5 !important;
    border-top: 2pt solid #000 !important;
    padding: 10pt 0 !important;
    margin-top: 16pt !important;
    page-break-inside: avoid;
  }

  .footer-main {
    display: block !important;
    padding-bottom: 8pt !important;
    border-bottom: 1px solid #999 !important;
  }

  .footer-main > * {
    margin-bottom: 8pt !important;
  }

  .fm-logo {
    display: inline-flex !important;
    margin-bottom: 6pt !important;
  }

  .fm-logo-badge {
    background: #000 !important;
    color: #fff !important;
    width: auto !important;
    height: auto !important;
    padding: 2pt 6pt !important;
    border-radius: 3pt !important;
    font-size: 10pt !important;
  }

  .fm-name {
    font-size: 11pt !important;
    color: #000 !important;
  }

  .fm-role,
  .fm-tagline {
    font-size: 9.5pt !important;
    color: #333 !important;
  }

  .fm-col-title {
    font-size: 9pt !important;
    color: #000 !important;
    margin-bottom: 4pt !important;
  }

  .fm-link,
  .fm-contact-item {
    font-size: 9.5pt !important;
    color: #333 !important;
    display: inline-block !important;
    margin-right: 12pt !important;
  }

  .fm-contact-item svg {
    display: none !important;
  }

  .fm-status {
    display: none !important;
  }

  .footer-bottom-bar {
    display: block !important;
    text-align: center !important;
    padding-top: 6pt !important;
  }

  .fbb-copy {
    font-size: 9pt !important;
    color: #333 !important;
    display: block !important;
    margin-bottom: 4pt !important;
  }

  .fbb-links {
    display: inline-block !important;
    font-size: 9pt !important;
  }

  .fbb-links a {
    color: #000 !important;
  }

  .fbb-links span {
    color: #666 !important;
  }
}

/* ============================================
   14. HERO SECTION
   ============================================ */
@media print {
  .hero {
    border-bottom: 2pt solid #000 !important;
    margin-bottom: 12pt !important;
  }

  .hero-visual,
  .float-card,
  .float-card-1,
  .float-card-2 {
    display: none !important;
  }

  .hero-badge {
    border-color: #333 !important;
    color: #333 !important;
  }
}

/* ============================================
   15. PAGE BREAKS
   ============================================ */
@media print {
  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
    break-after: avoid;
  }

  .value-card,
  .stat-big,
  .service-item,
  .service-home-card,
  .process-step,
  .connection-card,
  .testimonial-card,
  .timeline-content,
  .project-card,
  .blog-card,
  .skill-card,
  .story-block,
  .venture-card,
  .faq-item,
  .legal-section,
  .post-author,
  .case-study,
  .featured-tool,
  .company-grid {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .section:nth-of-type(n+3) {
    page-break-before: auto;
  }

  .post-hero + .post-body {
    page-break-before: avoid;
  }

  p {
    orphans: 3;
    widows: 3;
  }
}

/* ============================================
   16. LINKS — Show URL
   ============================================ */
@media print {
  .post-body a[href^="http"]::after,
  .legal-section a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #555;
    font-style: italic;
    word-break: break-all;
  }

  .post-body a[href^="mailto:"]::after,
  .legal-section a[href^="mailto:"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #555;
  }
}

/* ============================================
   17. PRINT HEADER + FOOTER
   ============================================ */
@media print {
  body::before {
    content: "MD Abu Bokkar — cyberprobd.online";
    display: block;
    text-align: center;
    font-size: 9pt;
    color: #666;
    padding-bottom: 6pt;
    margin-bottom: 12pt;
    border-bottom: 1px solid #ccc;
    font-family: 'Georgia', serif;
  }

  body::after {
    content: "© MD Abu Bokkar · Full Stack Developer · Dhaka, Bangladesh";
    display: block;
    text-align: center;
    font-size: 8pt;
    color: #888;
    padding-top: 6pt;
    margin-top: 12pt;
    border-top: 1px solid #ccc;
    font-family: 'Georgia', serif;
  }

  /* Skip on error/thank-you pages */
  .err-section ~ body::before,
  .thank-you-section ~ body::before,
  .offline-section ~ body::before {
    content: none !important;
    display: none !important;
  }
}

/* ============================================
   18. SEARCH / THANK YOU / OFFLINE / 404
   ============================================ */
@media print {
  .err-section,
  .thank-you-section,
  .offline-section,
  .search-page {
    padding: 20pt 0 !important;
    min-height: auto !important;
    text-align: left !important;
  }

  .err-content,
  .thank-you-content,
  .offline-content {
    max-width: 100% !important;
    margin: 0 !important;
  }

  .err-tag,
  .thank-you-icon,
  .offline-icon,
  .search-input-wrap,
  .err-suggest {
    display: none !important;
  }

  .err-code {
    font-size: 40pt !important;
    border: 2pt solid #000 !important;
    padding: 12pt !important;
    text-align: center !important;
    margin: 10pt 0 !important;
  }

  .err-title,
  .thank-you-title,
  .offline-title {
    font-size: 18pt !important;
    text-align: center !important;
  }

  .err-desc,
  .thank-you-desc,
  .offline-desc {
    text-align: center !important;
    font-size: 11pt !important;
    color: #333 !important;
  }
}

/* ============================================
   19. LISTS
   ============================================ */
@media print {
  ul, ol {
    padding-left: 18pt !important;
    margin-bottom: 8pt !important;
  }

  ul li {
    list-style: disc !important;
    margin-bottom: 4pt !important;
  }

  ol li {
    list-style: decimal !important;
    margin-bottom: 4pt !important;
  }

  .venture-list li,
  .legal-section ul li {
    list-style: none !important;
    padding-left: 14pt !important;
    position: relative;
  }

  .venture-list li::before,
  .legal-section ul li::before {
    content: "▸" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    color: #000 !important;
    font-weight: bold !important;
  }
}

/* ============================================
   20. FORCE COLOR ADJUSTMENT
   ============================================ */
@media print {
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  .post-body blockquote,
  .legal-intro,
  .legal-updated,
  .footer,
  .stat-strip,
  table th,
  table tr:nth-child(even) td {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

/* ============================================
   21. MOBILE NAV HIDE (print)
   ============================================ */
@media print {
  .mobile-nav,
  #mobileNav {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
  }

  body {
    padding-bottom: 0 !important;
  }
}

/* ============================================
   END — print.css v12.0
   ============================================ */