/* =====================================================
   PRINT STYLES - Optimized for guides, blog posts, and
   case study pages. Also benefits all other pages.

   Extracted from globals.css for better performance.
   This file is loaded with media="print" to avoid
   blocking the critical render path.
   ===================================================== */

/* ===========================================
   1. HIDE NON-ESSENTIAL UI ELEMENTS
   =========================================== */
header,
footer,
nav,
.scroll-indicator,
/* Cookie consent, WhatsApp widget, ScrollToTop, ExitIntentPopup */
[role="dialog"],
[aria-label="Cookie instellingen"],
[aria-label="Scroll naar boven"],
[aria-label="WhatsApp chat"],
/* Reading progress bar (blog posts) */
[role="progressbar"],
/* Skip link */
.sr-only,
/* Sidebar navigation (cluster nav, guide cluster nav) */
aside,
/* Elements marked with print:hidden utility */
.print\:hidden {
  display: none !important;
}

/* Hide specific fixed/floating elements without hiding all .fixed elements
   (which can unintentionally hide content rendered with that Tailwind class) */
button[aria-label="Scroll naar boven"],
[class*="WhatsApp"],
[class*="ExitIntent"],
[class*="CookieConsent"],
.z-\[60\],
.z-\[100\] {
  display: none !important;
}

/* ===========================================
   2. RESET BACKGROUNDS AND COLORS
   =========================================== */
*,
*::before,
*::after {
  background: transparent !important;
  color: #000 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

body {
  font-size: 12pt;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

/* ===========================================
   3. IMAGES
   =========================================== */
img {
  max-width: 100% !important;
  height: auto !important;
  page-break-inside: avoid;
  break-inside: avoid;
}

/* Restore visibility for content images */
img[src] {
  visibility: visible;
}

/* Hide decorative overlay/gradient divs that sit on top of images */
.absolute.inset-0[class*="gradient"],
.absolute.inset-0[aria-hidden="true"] {
  display: none !important;
}

/* Hero background images: hide the fill-mode cover images (decorative) */
section > img.object-cover[style*="position"] {
  display: none !important;
}

/* ===========================================
   4. LAYOUT: FULL-WIDTH CONTENT
   =========================================== */
.container {
  max-width: 100% !important;
  padding-left: 1cm !important;
  padding-right: 1cm !important;
  margin: 0 !important;
}

main {
  width: 100% !important;
}

/* Override grid layout so content spans full width (sidebar is hidden via aside rule) */
.lg\:grid-cols-4 {
  display: block !important;
}

.lg\:col-span-3 {
  grid-column: 1 / -1 !important;
  width: 100% !important;
}

/* Override 2-col and 3-col grids to stack vertically for readability */
.md\:grid-cols-2,
.md\:grid-cols-3,
.lg\:grid-cols-3,
.lg\:grid-cols-4 {
  grid-template-columns: 1fr !important;
}

/* Ensure prose content fills available width */
.prose,
.max-w-3xl,
.max-w-4xl {
  max-width: 100% !important;
}

/* ===========================================
   5. TYPOGRAPHY
   =========================================== */
h1 {
  font-size: 22pt !important;
  line-height: 1.2 !important;
  margin-bottom: 0.5em !important;
}

h2 {
  font-size: 18pt !important;
  line-height: 1.25 !important;
  margin-top: 1em !important;
  margin-bottom: 0.4em !important;
}

h3 {
  font-size: 14pt !important;
  line-height: 1.3 !important;
  margin-top: 0.8em !important;
  margin-bottom: 0.3em !important;
}

h4, h5, h6 {
  font-size: 12pt !important;
  line-height: 1.3 !important;
}

p, li, dd, blockquote {
  font-size: 11pt !important;
  line-height: 1.6 !important;
}

/* Ensure adequate contrast for all text */
a {
  color: #000 !important;
  text-decoration: underline !important;
}

/* ===========================================
   6. LINKS: SHOW URLS AFTER EXTERNAL LINKS
   =========================================== */
/* Show URLs for external links only (more practical than all links) */
a[href^="http"]::after,
a[href^="//"]::after {
  content: " (" attr(href) ")";
  font-size: 0.8em;
  font-weight: normal;
  color: #555 !important;
  word-break: break-all;
  text-decoration: none !important;
}

/* Don't show URLs for anchor links, internal nav, or hidden sections */
a[href^="#"]::after,
a[href^="javascript"]::after,
nav a[href]::after,
.print\:hidden a[href]::after,
/* Skip URLs in card grids (too noisy) */
.group a[href]::after,
a.group::after {
  content: "" !important;
}

/* ===========================================
   7. PAGE BREAK RULES
   =========================================== */
h1, h2, h3, h4, h5, h6 {
  page-break-after: avoid;
  break-after: avoid;
}

h1, h2, h3 {
  page-break-inside: avoid;
  break-inside: avoid;
}

/* Keep headings with their following content */
h1 + *, h2 + *, h3 + *, h4 + * {
  page-break-before: avoid;
  break-before: avoid;
}

p, li, blockquote {
  orphans: 3;
  widows: 3;
}

/* Avoid breaking inside cards, key stats, and compact content blocks */
[class*="Card"],
.rounded-2xl,
.rounded-xl,
li,
blockquote,
figure,
table {
  page-break-inside: avoid;
  break-inside: avoid;
}

/* Allow long sections to break across pages (unlike cards) */
section {
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
  /* Do NOT set page-break-inside: avoid on sections -- long article
     sections must be allowed to span multiple pages */
}

/* Force page breaks before major content sections for cleaner output */
article {
  page-break-before: auto;
}

/* ===========================================
   8. TABLES (for articles that include data)
   =========================================== */
table {
  border-collapse: collapse !important;
  width: 100% !important;
}

th, td {
  border: 1px solid #ccc !important;
  padding: 6px 10px !important;
  text-align: left !important;
}

th {
  font-weight: bold !important;
}

/* ===========================================
   9. BADGE AND CARD STYLING FOR PRINT
   =========================================== */
[class*="Badge"],
.badge {
  border: 1px solid #999 !important;
  padding: 2px 8px !important;
  display: inline-block !important;
}

/* Light border for cards */
[class*="Card"],
[class*="card"] {
  border: 1px solid #ddd !important;
  padding: 8px !important;
}

/* ===========================================
   10. HERO SECTIONS: ENSURE READABILITY
   =========================================== */
/* Hero sections with dark backgrounds need special treatment */
.bg-clever-charcoal {
  background: #f5f5f5 !important;
}

.bg-clever-charcoal *,
.bg-clever-charcoal h1,
.bg-clever-charcoal p {
  color: #000 !important;
}

/* Key stats section: restore light background border for visual separation */
.bg-clever-cream {
  border-bottom: 1px solid #ddd !important;
}

/* ===========================================
   11. DISABLE ALL ANIMATIONS AND TRANSITIONS
   =========================================== */
*,
*::before,
*::after {
  animation: none !important;
  transition: none !important;
}

/* ===========================================
   12. PAGE MARGINS
   =========================================== */
@page {
  margin: 2cm 1.5cm;
  size: A4;
}

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