/**
 * Print-Friendly Stylesheet for REDRAIZ Main Landing
 * Optimized for A4 and Letter paper sizes
 *
 * Usage: Automatically loaded by layout.tsx with media="print"
 */

/* ============================================
   1. RESET & BASE STYLES
   ============================================ */

@media print {
  * {
    box-shadow: none !important;
    text-shadow: none !important;
  }

  html,
  body {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    font-size: 12pt;
    line-height: 1.5;
    color: #000 !important;
    background: #fff !important;
  }

  /* ============================================
     2. HIDE NON-ESSENTIAL ELEMENTS
     ============================================ */

  /* Hide navigation */
  header,
  nav,
  [role="navigation"],
  .header,
  .navbar,
  .menu,
  .mobile-menu {
    display: none !important;
  }

  /* Hide footer */
  footer,
  [role="contentinfo"],
  .footer {
    display: none !important;
  }

  /* Hide interactive elements */
  button,
  .btn,
  .button,
  input[type="submit"],
  input[type="button"],
  .cta,
  .call-to-action {
    display: none !important;
  }

  /* Hide forms */
  form,
  input,
  textarea,
  select,
  .form,
  .contact-form,
  .demo-form,
  .newsletter-form {
    display: none !important;
  }

  /* Hide social media links */
  .social-links,
  .social-media,
  .share-buttons {
    display: none !important;
  }

  /* Hide videos and iframes */
  video,
  iframe,
  embed,
  object {
    display: none !important;
  }

  /* Hide animations and decorative elements */
  .animation,
  .decorative,
  .background-pattern,
  .gradient-overlay {
    display: none !important;
  }

  /* Hide cookie banners, modals, popups */
  .modal,
  .popup,
  .cookie-banner,
  .cookie-consent,
  .overlay {
    display: none !important;
  }

  /* ============================================
     3. OPTIMIZE TYPOGRAPHY
     ============================================ */

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: #000 !important;
    page-break-after: avoid;
    page-break-inside: avoid;
    font-weight: bold;
  }

  h1 {
    font-size: 24pt;
    margin-bottom: 12pt;
  }

  h2 {
    font-size: 20pt;
    margin-top: 16pt;
    margin-bottom: 10pt;
  }

  h3 {
    font-size: 16pt;
    margin-top: 14pt;
    margin-bottom: 8pt;
  }

  h4,
  h5,
  h6 {
    font-size: 14pt;
    margin-top: 12pt;
    margin-bottom: 6pt;
  }

  p {
    font-size: 12pt;
    margin-bottom: 8pt;
    orphans: 3;
    widows: 3;
  }

  /* Lists */
  ul,
  ol {
    margin-left: 0;
    padding-left: 20pt;
  }

  li {
    margin-bottom: 4pt;
  }

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

  /* Show URL after link text */
  a[href]:after {
    content: " (" attr(href) ")";
    font-size: 10pt;
    color: #666;
  }

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

  /* Abbreviations */
  abbr[title]:after {
    content: " (" attr(title) ")";
  }

  /* ============================================
     4. IMAGES & MEDIA
     ============================================ */

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

  /* Logo */
  .logo img {
    max-width: 150pt;
    display: block;
    margin-bottom: 12pt;
  }

  /* Convert images to grayscale for better printing */
  img {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
  }

  /* Keep brand colors for logo */
  .logo img,
  .brand img {
    filter: none;
    -webkit-filter: none;
  }

  /* ============================================
     5. PAGE BREAKS
     ============================================ */

  /* Always break before these elements */
  .page-break,
  .new-page {
    page-break-before: always;
  }

  /* Avoid breaks inside these elements */
  blockquote,
  table,
  pre,
  img,
  .card,
  .feature,
  .section {
    page-break-inside: avoid;
  }

  /* Avoid breaks after headings */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    page-break-after: avoid;
  }

  /* ============================================
     6. TABLES
     ============================================ */

  table {
    width: 100%;
    border-collapse: collapse;
    page-break-inside: avoid;
    margin-bottom: 12pt;
  }

  thead {
    display: table-header-group;
  }

  tfoot {
    display: table-footer-group;
  }

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

  th,
  td {
    border: 1pt solid #000;
    padding: 6pt;
    text-align: left;
  }

  th {
    background-color: #f0f0f0 !important;
    font-weight: bold;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* ============================================
     7. CODE BLOCKS
     ============================================ */

  code,
  pre {
    background-color: #f5f5f5 !important;
    border: 1pt solid #ccc;
    padding: 4pt;
    font-family: 'Courier New', Courier, monospace;
    font-size: 10pt;
    page-break-inside: avoid;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  pre {
    padding: 8pt;
    margin-bottom: 12pt;
    white-space: pre-wrap;
    word-wrap: break-word;
  }

  /* ============================================
     8. LAYOUT ADJUSTMENTS
     ============================================ */

  /* Main content */
  main,
  .main-content,
  [role="main"] {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
  }

  /* Remove fixed/absolute positioning */
  * {
    position: static !important;
    float: none !important;
  }

  /* Remove margins and padding from containers */
  .container,
  .wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* ============================================
     9. COLORS & BACKGROUNDS
     ============================================ */

  /* Remove backgrounds */
  body,
  section,
  div,
  article,
  aside {
    background: none !important;
    background-color: #fff !important;
    background-image: none !important;
  }

  /* Preserve some backgrounds for readability */
  .highlight,
  .callout,
  .important {
    background-color: #f9f9f9 !important;
    border: 1pt solid #ccc;
    padding: 8pt;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* ============================================
     10. SPECIFIC REDRAIZ ELEMENTS
     ============================================ */

  /* Hero section - simplify for print */
  .hero {
    padding: 12pt 0 !important;
    background: none !important;
  }

  .hero h1 {
    font-size: 24pt;
    margin-bottom: 8pt;
  }

  .hero p {
    font-size: 12pt;
  }

  /* Features grid - stack vertically */
  .features-grid,
  .grid,
  .flex {
    display: block !important;
    flex-direction: column !important;
  }

  .feature-card,
  .card {
    margin-bottom: 12pt;
    page-break-inside: avoid;
    border: 1pt solid #ddd;
    padding: 8pt;
  }

  /* Testimonials */
  .testimonial {
    margin-bottom: 12pt;
    page-break-inside: avoid;
    border-left: 3pt solid #000;
    padding-left: 8pt;
  }

  /* Pricing tables */
  .pricing-card {
    border: 1pt solid #000;
    padding: 8pt;
    margin-bottom: 12pt;
    page-break-inside: avoid;
  }

  /* ============================================
     11. PAGE MARGINS & PAPER SIZE
     ============================================ */

  @page {
    margin: 2cm;
    size: A4 portrait;
  }

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

  @page :left {
    margin-right: 2.5cm;
  }

  @page :right {
    margin-left: 2.5cm;
  }

  /* ============================================
     12. PRINT-SPECIFIC UTILITIES
     ============================================ */

  /* Show print-only elements */
  .print-only,
  .visible-print {
    display: block !important;
  }

  /* Hide screen-only elements */
  .screen-only,
  .hidden-print,
  .no-print {
    display: none !important;
  }

  /* Print URL at bottom of page */
  body:after {
    content: "Impreso desde: " attr(data-url);
    display: block;
    margin-top: 24pt;
    padding-top: 8pt;
    border-top: 1pt solid #ccc;
    font-size: 10pt;
    color: #666;
  }

  /* ============================================
     13. PERFORMANCE OPTIMIZATIONS
     ============================================ */

  /* Remove transitions and animations */
  * {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }

  /* Remove opacity effects */
  * {
    opacity: 1 !important;
  }
}

/* ============================================
   14. ACCESSIBILITY & QUALITY
   ============================================ */

@media print {
  /* High contrast for better readability */
  body {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Orphans and widows control */
  p,
  blockquote,
  li {
    orphans: 3;
    widows: 3;
  }

  /* Ensure text is readable */
  * {
    font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}