/* /public/print.css - Tallyfy Print Stylesheet
 * Comprehensive print styles for all page types
 * Loaded via: <link rel="stylesheet" href="/print.css" media="print">
 */

/* ============================================
   PAGE SETUP
   ============================================ */
@page {
  size: letter;
  margin: 0.75in 0.5in;
}

/* ============================================
   GLOBAL HIDE RULES
   Navigation, Interactive, and Decorative Elements
   ============================================ */

/* Navigation elements */
#header,
header#header,
.left-sidebar,
.mega-menu-button,
.dropdown-menu,
nav[aria-label="Main navigation"],
.toggle-menu,
.toggle-theme {
  display: none !important;
}

/* Reset fixed positioning to prevent layout issues in print */
/* Fixed elements can cause content overlay even when hidden */
#header,
header#header,
.left-sidebar,
#reading-progress-container,
.reading-progress,
.table-of-contents,
[class*="TableOfContents"] {
  position: static !important;
}

/* Interactive widgets */
.testimonials-rolling,
.share-dropdown,
.compliance-grid,
.wave-signup-cta,
.session-checker,
.reading-progress,
#reading-progress-container,
.gooey-button-canvas,
.ripple-container,
.nav-arrow {
  display: none !important;
}

/* Blog-specific elements */
.table-of-contents,
[class*="TableOfContents"],
.related-posts,
.post-tags,
.floating-icon-container,
.icon-blob {
  display: none !important;
}

/* CTAs and marketing */
/* Using explicit classes to avoid catching unrelated words like "reactiva" or "educational" */
.call-to-action,
.high-intent-cta,
.wave-signup-cta,
.btn-gooey,
.gooey-button,
.cta-section,
.cta-block,
.cta-banner,
.cta-box,
.cta-card,
.cta-wrapper,
.demo-cta,
.trial-cta,
.signup-cta,
.booking-cta,
section.bg-brand-green,
section.bg-brand-green-dark,
section.bg-green-500,
section.bg-green-600,
section.bg-green-700,
div.schedule-demo,
div.schedule-call,
.schedule-section {
  display: none !important;
}

/* Hide CTA sections with specific structure (not content areas) */
/* Only hide sections that are purely CTA blocks, not main content */
/* Note: Using explicit classes instead of :has() for browser compatibility */
section.cta-section,
section.cta-block,
section.cta-banner,
div.cta-block,
aside.booking-cta,
aside.booking-aside,
.schedule-cta,
.booking-section {
  display: none !important;
}

/* Hide decorative large images (team photos, world maps) */
img[src*="team-photo"],
img[src*="world-map"],
img[alt*="team photo"],
img[class*="decorative"] {
  display: none !important;
}

/* Hide colored border decorations */
[class*="border-brand"],
[class*="border-green"],
[class*="border-\\[\\#01803d\\]"] {
  border-color: #ccc !important;
}

/* Hero decorations and gradients */
.hero-gradient-container,
.hero-gradients-blobs,
.hero-solid-bg,
.text-scrim,
.sidebar-gradient-bg,
.sidebar-fallback-gradient,
.sidebar-enhanced-gradient,
.interactive-gradient,
.hg1, .hg2, .hg3, .hg4, .hg5 {
  display: none !important;
}

/* Utility class for manual hiding */
.no-print {
  display: none !important;
}

/* ============================================
   AGGRESSIVE COLOR RESET
   Force all potentially colored elements to white
   ============================================ */

/* Any element with inline style background */
[style*="background"] {
  background: white !important;
  background-color: white !important;
  background-image: none !important;
}

/* Tailwind color classes - force white */
[class*="bg-slate"],
[class*="bg-gray"],
[class*="bg-zinc"],
[class*="bg-neutral"],
[class*="bg-stone"],
[class*="bg-red"],
[class*="bg-orange"],
[class*="bg-amber"],
[class*="bg-yellow"],
[class*="bg-lime"],
[class*="bg-green"],
[class*="bg-emerald"],
[class*="bg-teal"],
[class*="bg-cyan"],
[class*="bg-sky"],
[class*="bg-blue"],
[class*="bg-indigo"],
[class*="bg-violet"],
[class*="bg-purple"],
[class*="bg-fuchsia"],
[class*="bg-pink"],
[class*="bg-rose"] {
  background: white !important;
  background-color: white !important;
}

/* Exception: Keep light gray backgrounds for code blocks */
pre, code, .code-block {
  background: #f5f5f5 !important;
}

/* Force all text to black regardless of parent background */
[class*="text-white"],
[class*="text-gray-"],
[class*="text-slate-"] {
  color: black !important;
}

/* ============================================
   LAYOUT RESET
   Remove sidebar offsets and container constraints
   ============================================ */

body {
  font-size: 11pt !important;
  line-height: 1.6 !important;
  color: black !important;
  background: white !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Remove sidebar offsets */
main,
.site-main-content,
footer,
body > section,
body > article {
  margin-left: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Blog article specific - remove xl:ml-72 offset */
article {
  margin-left: 0 !important;
}

/* Content containers */
.max-w-7xl,
.max-w-6xl,
.max-w-5xl,
.max-w-4xl,
.max-w-3xl {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Prose content */
.prose {
  max-width: 100% !important;
  font-size: 11pt !important;
  line-height: 1.6 !important;
}

/* ============================================
   TYPOGRAPHY
   Print-optimized font sizes and page breaks
   ============================================ */

h1 {
  font-size: 22pt !important;
  color: black !important;
  page-break-after: avoid;
  margin-top: 0 !important;
  margin-bottom: 0.5em !important;
  line-height: 1.2 !important;
}

h2 {
  font-size: 16pt !important;
  color: black !important;
  page-break-after: avoid;
  margin-top: 1.5em !important;
  margin-bottom: 0.5em !important;
  line-height: 1.3 !important;
}

h3 {
  font-size: 13pt !important;
  color: black !important;
  page-break-after: avoid;
  margin-top: 1.2em !important;
  margin-bottom: 0.4em !important;
}

h4, h5, h6 {
  font-size: 11pt !important;
  color: black !important;
  page-break-after: avoid;
  font-weight: 600 !important;
}

p, li, span, div {
  color: black !important;
}

p {
  margin-bottom: 0.8em !important;
}

p, li, blockquote {
  orphans: 3;
  widows: 3;
  page-break-inside: avoid;
}

/* ============================================
   LINKS
   Show URLs for external links
   ============================================ */

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

/* External links - show URL */
a[href^="http"]:after {
  content: " (" attr(href) ")";
  font-size: 8pt;
  color: #555 !important;
  word-break: break-all;
}

/* Don't show URL for internal and anchor links */
a[href^="/"]:after,
a[href^="#"]:after {
  content: none;
}

/* Don't show URL for Tallyfy links (internal) */
a[href*="tallyfy.com"]:after {
  content: none;
}

/* ============================================
   BACKGROUNDS
   Force white backgrounds everywhere
   ============================================ */

section,
div,
article,
header,
footer,
aside {
  background: white !important;
  background-color: white !important;
  background-image: none !important;
}

/* Dark mode overrides */
.dark,
.hero-dark-forced,
.footer-dark-forced {
  background: white !important;
  color: black !important;
}

/* Force ALL green/brand backgrounds to white */
[class*="bg-brand"],
[class*="bg-green"],
[class*="bg-emerald"],
[class*="bg-\\[\\#01803d\\]"],
[class*="bg-\\[\\#3fb65b\\]"],
.bg-brand-green,
.bg-brand-green-dark {
  background: white !important;
  background-color: white !important;
}

/* Hide video embeds and iframes */
/* Using explicit classes to avoid hiding legitimate content like "video-tutorial-text" */
iframe,
.video-embed,
.youtube-embed,
.video-container,
.video-player,
.video-wrapper,
.embed-video,
.youtube-container,
.vimeo-embed {
  display: none !important;
}

/* Force text color on any element with brand backgrounds */
[class*="bg-brand"] *,
[class*="bg-green"] *,
[class*="bg-emerald"] * {
  color: black !important;
}

/* ============================================
   IMAGES
   ============================================ */

img {
  max-width: 100% !important;
  page-break-inside: avoid;
}

/* Author avatar */
img.rounded-full {
  width: 40px !important;
  height: 40px !important;
  border: 1px solid #333 !important;
}

/* Decorative SVGs */
.floating-icon,
svg.animate-spin,
svg[class*="animate"] {
  display: none !important;
}

/* ============================================
   CODE BLOCKS
   ============================================ */

pre, code {
  background: #f5f5f5 !important;
  color: black !important;
  border: 1px solid #ccc !important;
  font-size: 9pt !important;
  white-space: pre-wrap !important;
  word-wrap: break-word !important;
  page-break-inside: avoid;
}

pre {
  padding: 0.75em !important;
  overflow: visible !important;
  margin: 1em 0 !important;
}

code {
  padding: 0.1em 0.3em !important;
}

/* ============================================
   SPECIAL CONTENT ELEMENTS
   ============================================ */

/* Blockquotes */
blockquote {
  border-left: 3px solid #333 !important;
  background: #f9f9f9 !important;
  padding: 0.75em 1em !important;
  margin: 1em 0 !important;
  page-break-inside: avoid;
  font-style: italic !important;
}

/* Summary box (blog posts) */
.pb-6.mb-6.border-b-4,
.border-b-4.border-\\[\\#01803d\\] {
  border-color: #333 !important;
  border-width: 2px !important;
  background: #f8f8f8 !important;
  padding: 1em !important;
  margin-bottom: 1.5em !important;
  page-break-inside: avoid;
}

/* Tables */
table {
  border-collapse: collapse !important;
  width: 100% !important;
  margin: 1em 0 !important;
  page-break-inside: avoid;
}

th, td {
  border: 1px solid #333 !important;
  padding: 0.5em !important;
  color: black !important;
  background: white !important;
  text-align: left !important;
}

th {
  background: #f0f0f0 !important;
  font-weight: 600 !important;
}

/* Lists */
ul, ol {
  margin: 0.5em 0 0.5em 1.5em !important;
  padding: 0 !important;
}

li {
  margin-bottom: 0.3em !important;
}

/* ============================================
   FOOTER
   ============================================ */

footer {
  page-break-before: auto;
  border-top: 1px solid #333 !important;
  padding: 1rem !important;
  background: white !important;
  margin-top: 2em !important;
}

/* Hide footer navigation, keep copyright */
footer .grid,
footer nav,
footer .social-links,
footer ul {
  display: none !important;
}

/* Show only copyright line */
footer .text-xs,
footer .copyright {
  display: block !important;
  color: black !important;
  text-align: center !important;
}

/* ============================================
   BLOG POST SPECIFIC
   ============================================ */

/* Blog hero masthead */
.blog-hero-wrapper {
  min-height: auto !important;
  height: auto !important;
  background: white !important;
  padding: 1rem 0 !important;
  border-bottom: 2px solid black !important;
  position: relative !important;
  margin-bottom: 1.5em !important;
}

.hero-content {
  position: static !important;
  padding: 0 !important;
}

.hero-content h1,
.hero-content p {
  color: black !important;
  text-shadow: none !important;
}

/* Author info row */
.blog-hero-wrapper .flex.items-center {
  color: black !important;
}

.blog-hero-wrapper a {
  color: black !important;
}

/* Hide LinkedIn follow button in print */
.blog-hero-wrapper a[href*="linkedin.com"] {
  display: none !important;
}

/* Blog prose content */
article .prose {
  color: black !important;
}

article .prose h2 {
  border-bottom: 1px solid #ddd !important;
  padding-bottom: 0.3em !important;
}

article .prose a {
  color: black !important;
}

/* Blog metadata */
.post-meta,
.reading-time,
.publish-date {
  color: #555 !important;
  font-size: 10pt !important;
}

/* ============================================
   HOMEPAGE SPECIFIC
   ============================================ */

/* Hero section - force white background */
.hero-section,
section[class*="hero"],
.hero,
[class*="Hero"] {
  background: white !important;
  background-color: white !important;
  background-image: none !important;
  min-height: auto !important;
  padding: 1rem !important;
}

/* Hide hero images and decorative photos */
.hero-image,
.hero-photo,
[class*="hero"] img:not(.author-avatar):not(.logo) {
  display: none !important;
}

/* Feature grids */
.feature-grid,
.features-section {
  page-break-inside: avoid;
}

/* Hide testimonial photos in homepage */
.testimonial-photo,
.customer-photo {
  max-width: 60px !important;
  max-height: 60px !important;
}

/* Hide compliance/integration grid on homepage */
/* Using explicit classes to avoid catching unrelated elements */
.compliance-section,
.compliance-grid,
.compliance-badge,
.integrations-section,
.integrations-grid,
.integration-logo,
.integration-grid {
  display: none !important;
}

/* Stop wasting section - hide decorations */
.wasting-section,
.stop-wasting-section {
  background: white !important;
}

/* Pricing calculator - hide interactive elements */
.calculator,
.pricing-calculator,
.roi-calculator,
.savings-calculator,
.roi-section {
  display: none !important;
}

/* ============================================
   ALTERNATIVE PAGES (Competitor Comparisons)
   ============================================ */

.alternative-hero,
.two-column-hero {
  background: white !important;
  color: black !important;
  min-height: auto !important;
  padding: 1rem !important;
}

/* Hide decorative team photos and world map images on alternative pages */
img[src*="team"],
img[src*="Team"],
img[src*="gdp"],
img[src*="world-map"],
img[alt*="Team"],
img[alt*="team"],
img[alt*="GDP"],
img[alt*="world"] {
  display: none !important;
}

/* Hide green CTA sections */
.bg-green-900\/20,
[class*="bg-green-900"],
[class*="bg-green-800"],
[class*="bg-green-700"],
div[class*="bg-green"][class*="rounded"] {
  display: none !important;
}

/* Hide ROI calculator section including heading */
a#roicalc,
a#roicalc + h2 {
  display: none !important;
}

/* Comparison tables */
.alternative-comparison-table,
.comparison-table {
  page-break-inside: avoid;
  margin: 1em 0 !important;
}

.alternative-comparison-table th,
.comparison-table th {
  background: #e8e8e8 !important;
}

/* TfQuote styling */
.tf-quote,
blockquote.tf-quote {
  border-left: 4px solid #01803d !important;
  background: #f5f5f5 !important;
  padding: 1em !important;
  margin: 1em 0 !important;
  font-style: italic !important;
}

/* Hide ROI calculator */
.roi-calculator,
.pricing-calculator {
  display: none !important;
}

/* Legal disclaimer */
.legal-disclaimer,
.disclaimer-section {
  border: 1px solid #333 !important;
  padding: 0.75em !important;
  background: #f9f9f9 !important;
  page-break-inside: avoid;
  font-size: 9pt !important;
}

/* ============================================
   SOLUTION PAGES
   ============================================ */

.solution-hero {
  background: white !important;
  min-height: auto !important;
  padding: 1rem !important;
}

/* Hide green decorative sidebar/border on solution pages */
.solution-sidebar,
.solution-decoration,
.border-brand-green,
.border-l-4.border-brand-green,
[class*="border-l-4"][class*="border-brand"],
[class*="border-l-8"] {
  border-left-color: #ccc !important;
  border-color: #ccc !important;
}

/* Hide booking/schedule CTA on solution pages */
/* Note: Using explicit classes instead of :has() for browser compatibility */
section.schedule-section,
section.booking-cta,
section.friendly-chat-section,
div.friendly-chat,
.schedule-demo-section,
.book-demo-section {
  display: none !important;
}

/* Hide Calendly embed container and entire CTA sections */
.calendly-embed-container,
iframe[src*="calendly"],
iframe[title*="Schedule"],
iframe[title*="demo"] {
  display: none !important;
}

/* Hide YouTube/video embeds and players */
lite-youtube,
.astro-embed,
.youtube-player,
.video-section,
astro-island[component-export="YouTube"] {
  display: none !important;
}

/* Process steps */
.process-steps,
.solution-steps {
  page-break-inside: avoid;
}

.process-steps li,
.solution-steps li {
  margin-bottom: 0.5em !important;
  page-break-inside: avoid;
}

/* Benefits list */
.solution-benefits-list,
.benefits-list {
  page-break-inside: avoid;
}

.solution-benefits-list li::before,
.benefits-list li::before {
  content: "- " !important;
}

/* Solution FAQ */
.solution-faq-question {
  font-weight: 600 !important;
  margin-top: 1em !important;
}

.solution-faq-answer {
  margin-left: 0 !important;
  margin-bottom: 1em !important;
}

/* ============================================
   LEGAL PAGES
   ============================================ */

/* Hide sidebar and tabs */
.legal-sidebar,
.legal-tabs,
.legal-subnav,
.tab-navigation {
  display: none !important;
}

/* Legal content full width */
.legal-content,
.legal-body {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
}

.legal-body .prose {
  max-width: 100% !important;
}

/* Legal section headers */
.legal-body h2 {
  margin-top: 1.5em !important;
  border-bottom: 1px solid #ccc !important;
  padding-bottom: 0.3em !important;
}

/* Effective date */
.effective-date {
  font-style: italic !important;
  color: #555 !important;
  margin-bottom: 1em !important;
}

/* ============================================
   TEMPLATE PAGES (Procedures, Forms, Documents)
   ============================================ */

/* Template grid */
.template-grid {
  display: block !important;
}

.template-grid > * {
  width: 100% !important;
  margin-bottom: 1rem !important;
  page-break-inside: avoid;
}

/* Template cards */
.template-card {
  border: 1px solid #ccc !important;
  padding: 0.75em !important;
  margin-bottom: 0.75em !important;
  page-break-inside: avoid;
  background: white !important;
}

.template-card h3 {
  margin-top: 0 !important;
  font-size: 12pt !important;
}

/* Hide template pagination */
.template-pagination {
  display: none !important;
}

/* Procedure steps */
.procedure-steps {
  page-break-inside: avoid;
}

.procedure-steps ol {
  counter-reset: step-counter;
  list-style: none !important;
  padding-left: 0 !important;
}

.procedure-steps li {
  counter-increment: step-counter;
  margin-bottom: 0.75em !important;
  padding-left: 2em !important;
  position: relative !important;
}

.procedure-steps li::before {
  content: counter(step-counter) ".";
  position: absolute !important;
  left: 0 !important;
  font-weight: 600 !important;
}

/* Form preview */
.form-preview {
  border: 1px solid #ccc !important;
  padding: 1em !important;
  background: #fafafa !important;
  page-break-inside: avoid;
}

.form-field {
  margin-bottom: 0.5em !important;
}

.form-field label {
  font-weight: 600 !important;
  display: block !important;
}

/* ============================================
   GUIDE PAGES
   ============================================ */

/* Summary box / card-snipped */
.card-snipped,
.summary-box {
  border: 1px solid #333 !important;
  background: #f8f8f8 !important;
  padding: 1em !important;
  margin: 1em 0 !important;
  page-break-inside: avoid;
}

/* FAQ grid */
.faq-grid {
  page-break-inside: avoid;
}

.faq-grid details {
  border: 1px solid #ddd !important;
  margin-bottom: 0.5em !important;
  padding: 0.5em !important;
  page-break-inside: avoid;
}

.faq-grid summary {
  font-weight: 600 !important;
  cursor: default !important;
}

/* Force details open in print */
.faq-grid details[open],
details {
  page-break-inside: avoid;
}

/* Example box */
.example-box {
  border-left: 3px solid #01803d !important;
  background: #f5f9f5 !important;
  padding: 0.75em 1em !important;
  margin: 1em 0 !important;
  page-break-inside: avoid;
}

/* Interlinking box */
.interlinking-box {
  background: #f5f5f5 !important;
  border: 1px solid #ddd !important;
  padding: 0.75em !important;
  margin: 1em 0 !important;
}

/* ============================================
   PRICING PAGE
   ============================================ */

.pricing-table {
  page-break-inside: avoid;
}

.pricing-card {
  border: 1px solid #333 !important;
  padding: 1em !important;
  margin-bottom: 1em !important;
  page-break-inside: avoid;
}

.pricing-card .price {
  font-size: 18pt !important;
  font-weight: 700 !important;
}

/* ============================================
   GRID LAYOUTS
   Convert multi-column to single column
   ============================================ */

.grid {
  display: block !important;
}

.grid > * {
  width: 100% !important;
  margin-bottom: 1rem !important;
}

/* Flex containers - wrap for print */
.flex {
  flex-wrap: wrap !important;
}

/* Two column layouts */
.md\:grid-cols-2,
.lg\:grid-cols-2,
.xl\:grid-cols-2 {
  display: block !important;
}

.md\:grid-cols-3,
.lg\:grid-cols-3,
.xl\:grid-cols-3 {
  display: block !important;
}

/* ============================================
   SPECIAL PAGES
   ============================================ */

/* Booking/Contact pages */
.booking-form,
.contact-form {
  display: none !important;
}

.booking-info,
.contact-info {
  page-break-inside: avoid;
}

/* Customers page */
.customer-logos {
  display: flex !important;
  flex-wrap: wrap !important;
}

.customer-logos img {
  max-width: 120px !important;
  margin: 0.5em !important;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Force visibility */
.print-show {
  display: block !important;
}

/* Page break controls */
.page-break-before {
  page-break-before: always;
}

.page-break-after {
  page-break-after: always;
}

.no-page-break {
  page-break-inside: avoid;
}