/* ===========================================================================
   PRINT STYLES - CONSOLIDATED & OPTIMIZED
   Version: 5.0
   Created: December 29, 2024
   Updated: December 29, 2024
   
   PURPOSE: Optimize pages for print output
   - Hide interactive/digital-only elements
   - Reset colors for black & white printing
   - Ensure readability on paper
   - Show URLs for external links
   - Prevent awkward page breaks
   - Save ink and improve readability
   
   WCAG 2.1 AA Compliant | Production-Ready
   =========================================================================== */

@media print {
    /* ============================================
       PAGE SETUP
       ============================================ */
    @page {
        margin: 2cm;
        size: auto;
    }
    
    /* ============================================
       GLOBAL RESET & OPTIMIZATION
       Convert dark theme to print-friendly light theme
       ============================================ */
    * {
        background: transparent !important;
        background-image: none !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        background-attachment: scroll !important;
    }
    
    body {
        background: white !important;
        color: black !important;
        font-size: 12pt;
        line-height: 1.6;
        margin: 1cm;
    }
    
    /* Remove decorative pseudo-elements */
    body::before,
    section::before,
    h2::after {
        display: none !important;
    }
    
    /* ============================================
       HIDE INTERACTIVE & DIGITAL-ONLY ELEMENTS
       UI components that don't make sense on paper
       ============================================ */
    .site-header,
    .site-footer,
    header,
    nav,
    footer,
    .menu-toggle,
    .main-nav,
    .cta-buttons,
    .cta-section,
    .btn,
    button,
    .carousel-btn,
    .carousel-dots,
    .carousel-nav,
    .carousel-indicators,
    .hero-carousel-indicators,
    .filter-btn,
    .filter-controls,
    .lightbox,
    .back-to-top,
    .video-wrapper,
    .video-container,
    .video-embed-wrapper,
    .video-unmute-btn,
    video,
    audio,
    iframe,
    .notification,
    .footer-social,
    .dropdown-menu,
    form,
    input,
    textarea,
    select,
    .skip-link,
    .gallery-overlay,
    .gallery-badge,
    .thumbnail-nav,
    .no-print {
        display: none !important;
    }
    
    /* ============================================
       HERO SECTIONS
       Background images/videos don't print well
       ============================================ */
    .hero,
    .hero-video-section,
    .hero-image-section,
    .hero-carousel-bg-section,
    .hero-photography {
        display: none !important;
    }
    
    /* Keep hero images if needed (max height) */
    .hero-image {
        max-height: 8cm;
        object-fit: cover;
    }
    
    /* Hide decorative background images */
    .hero-bg img,
    .background-image {
        display: none !important;
    }
    
    /* ============================================
       TYPOGRAPHY
       Optimize text for readability on paper
       ============================================ */
    h1, h2, h3, h4, h5, h6 {
        color: #000 !important;
        background: none !important;
        -webkit-text-fill-color: #000 !important;
        -webkit-background-clip: unset !important;
        background-clip: unset !important;
        page-break-after: avoid;
        page-break-inside: avoid;
        orphans: 3;
        widows: 3;
    }
    
    h1 {
        font-size: 24pt;
        margin-bottom: 12pt;
    }
    
    h2 {
        font-size: 18pt;
        margin-top: 18pt;
        margin-bottom: 12pt;
    }
    
    h3 {
        font-size: 14pt;
        margin-top: 12pt;
        margin-bottom: 8pt;
    }
    
    p, 
    li, 
    span, 
    a,
    .text-primary,
    .text-secondary, 
    .text-muted,
    .alert p,
    .feature-content p,
    .step-content p {
        color: #000 !important;
        orphans: 3;
        widows: 3;
    }
    
    /* ============================================
       LINKS
       Show URLs for external links
       ============================================ */
    a {
        color: #000 !important;
        text-decoration: underline !important;
    }
    
    /* Show URLs for external links */
    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 10pt;
        color: #666;
        font-weight: normal;
        word-wrap: break-word;
    }
    
    /* Don't show URLs for internal/special links */
    a[href^="/"]::after,
    a[href^="#"]::after,
    a[href^="tel:"]::after,
    a[href^="mailto:"]::after,
    a[href^="javascript:"]::after,
    .btn::after,
    .cta-buttons a::after {
        content: "" !important;
    }
    
    /* ============================================
       CARDS & PANELS
       Convert glassmorphic cards to print-friendly boxes
       ============================================ */
    .glass-panel,
    .glass-card,
    .glass-card-intense,
    .service-card,
    .why-card,
    .why-imagelab-card,
    .icon-card,
    .feature-card,
    .impact-card,
    .pricing-item,
    .philosophy-card,
    .benefit-card,
    .value-item,
    .capability-item,
    .service-detail-item,
    .process-step,
    .card,
    .alert,
    blockquote,
    code,
    pre {
        background: white !important;
        border: 1pt solid #ccc !important;
        box-shadow: none !important;
        page-break-inside: avoid;
        margin-bottom: 1rem;
    }
    
    /* ============================================
       LAYOUT ADJUSTMENTS
       Single column layout for better readability
       ============================================ */
    .container {
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important;
    }
    
    /* Convert grids to single column */
    .services-grid,
    .why-grid,
    .portfolio-grid,
    .benefits-grid,
    .capabilities-grid,
    .why-imagelab-grid,
    .philosophy-grid,
    .pricing-grid,
    .value-grid,
    .approach-grid,
    .process-steps {
        display: block !important;
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    /* Ensure grid items avoid breaks */
    .services-grid > *,
    .why-grid > *,
    .portfolio-grid > *,
    .benefits-grid > *,
    .capabilities-grid > * {
        margin-bottom: 1rem;
        page-break-inside: avoid;
    }
    
    /* Section spacing */
    section {
        page-break-inside: avoid;
        margin-bottom: 1cm;
    }
    
    .content-section,
    .section-padding {
        border-bottom: 1pt solid #ccc;
        padding-bottom: 0.5cm;
        margin-bottom: 0.5cm;
        page-break-inside: avoid;
    }
    
    /* ============================================
       PAGE BREAKS
       Prevent awkward breaks in content
       ============================================ */
    .page-break {
        page-break-before: always;
    }
    
    .page-break-after {
        page-break-after: always;
    }
    
    .no-page-break,
    .experience-glass-panel,
    .testimonial-section {
        page-break-inside: avoid;
    }
    
    /* ============================================
       IMAGES
       Optimize images for print
       ============================================ */
    img {
        max-width: 100% !important;
        height: auto !important;
        page-break-inside: avoid;
        page-break-after: avoid;
    }
    
    /* Keep content images visible with border */
    .gallery-item img,
    .portfolio-item img,
    article img {
        display: block !important;
        border: 1px solid #ccc;
        padding: 0.5rem;
    }
    
    /* ============================================
       LISTS
       Improve readability
       ============================================ */
    ul, ol {
        margin-left: 1.5em;
    }
    
    li {
        margin-bottom: 0.5em;
    }
    
    /* ============================================
       TABLES
       ============================================ */
    table {
        border-collapse: collapse;
        width: 100%;
        page-break-inside: avoid;
    }
    
    th, td {
        border: 1px solid #000;
        padding: 0.5em;
        text-align: left;
    }
    
    th {
        background: #f0f0f0 !important;
        font-weight: bold;
    }
    
    /* ============================================
       SPECIAL ELEMENTS
       ============================================ */
    
    /* Blockquotes */
    blockquote {
        border-left: 4px solid #000 !important;
        padding-left: 1em;
        margin: 1em 0;
        font-style: italic;
    }
    
    /* Code blocks */
    pre, code {
        border: 1px solid #ccc !important;
        background: #f5f5f5 !important;
        padding: 0.5em !important;
        font-family: 'Courier New', monospace;
        font-size: 10pt;
        white-space: pre-wrap;
        word-wrap: break-word;
    }
    
    /* Alerts */
    .alert {
        border-left-width: 4px !important;
    }
    
    .alert-success,
    .alert-error,
    .alert-warning,
    .alert-info {
        border-left-color: #000 !important;
    }
    
    .alert strong {
        font-weight: bold;
    }
    
    /* ============================================
       PRICING TABLES
       ============================================ */
    .pricing-item {
        border: 2px solid #000 !important;
        padding: 1rem;
    }
    
    .pricing-badge {
        position: static !important;
        display: inline-block;
        background: #f0f0f0 !important;
        color: #000 !important;
        padding: 0.25em 0.5em;
        border: 1px solid #000;
        margin-bottom: 0.5em;
    }
    
    .pricing-features li::before {
        content: "✓ " !important;
        color: #000 !important;
    }
    
    /* ============================================
       FOOTER INFORMATION
       Show essential contact info
       ============================================ */
    .footer-brand,
    .footer-contact {
        display: block !important;
        page-break-inside: avoid;
    }
    
    .footer-logo {
        display: none !important;
    }
    
    .footer-description,
    .footer-contact li {
        color: #000 !important;
    }
    
    /* ============================================
       PRINT-SPECIFIC UTILITIES
       ============================================ */
    .print-only {
        display: block !important;
    }
    
    /* Optional: Add printed date
    body::after {
        content: "Printed: " attr(data-print-date);
        display: block;
        text-align: right;
        font-size: 10pt;
        color: #666;
        margin-top: 2em;
        padding-top: 1em;
        border-top: 1px solid #ccc;
    }
    */
}

/* ============================================
   PRINT PREVIEW HELPER (Optional)
   For testing print styles in browser
   ============================================ */
@media screen {
    .print-preview {
        max-width: 21cm;
        min-height: 29.7cm;
        margin: 2cm auto;
        background: white;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        padding: 2cm;
    }
}

/* ===========================================================================
   END OF PRINT STYLES
   =========================================================================== */