/* print.css - Making PDFs sexier than a botanical photography calendar */

@page {
    size: A4 portrait;
    margin: 1.5cm 1.8cm;
    bleed: 0;

    /* Add a subtle purple gradient footer */
    @bottom-center {
        content: "";
        display: block;
        height: 6mm;
        width: 60mm;
        background: linear-gradient(to right, rgba(112, 0, 255, 0.01), rgba(112, 0, 255, 0.1), rgba(112, 0, 255, 0.01));
        border-radius: 3mm;
        margin: 0 auto;
    }

    /* Add page numbers */
    @bottom-right {
        content: counter(page);
        font-family: "Söhne Mono", "JetBrains Mono", monospace;
        font-size: 9pt;
        color: #999;
    }

    /* Add custom date on last page */
    @bottom-left {
        content: attr(data-print-date);
        font-family: "Inter", sans-serif;
        font-size: 8pt;
        color: #999;
    }
}

/* First page special treatment */
.paper:first-of-type {
    page-break-after: always;
}

@page :first {
    @bottom-right {
        content: "";
    }

    @bottom-left {
        content: "HOUSE OF HAPPY LEAF";
        font-family: "Inter", sans-serif;
        font-weight: 500;
        font-size: 8pt;
        color: rgba(112, 0, 255, 0.7);
        letter-spacing: 0.05em;
    }
}

/* Remove unnecessary elements for print */
@media print {
    body {
        background-color: white !important;
        font-family: "Inter", sans-serif !important;
        font-size: 10pt !important;
        line-height: 1.4 !important;
        color: #111 !important;
    }

    header,
    nav,
    button,
    #print-proposal-btn,
    #print-modal,
    .button-shine::after {
        display: none !important;
    }

    /* Unset all animations */
    .float,
    .wiggle,
    .pulse,
    .blob,
    .button-shine {
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
    }

    /* Paper & section modifications */
    .paper {
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        page-break-inside: avoid !important;
    }

    section {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        padding: 0 !important;
        margin-top: 0.8cm !important;
        margin-bottom: 0.8cm !important;
    }

    /* Ensure the hero section looks perfect */
    section:first-of-type {
        margin-top: 0 !important;
    }

    /* Section flow control */
    section.gradient-bg {
        background: rgba(112, 0, 255, 0.03) !important;
        border-radius: 8pt !important;
        padding: 1.2cm 0 !important;
        margin: 0.5cm 0 !important;
    }

    /* Force page breaks between major sections */
    h2 {
        page-break-before: always !important;
        margin-top: 0.5cm !important;
    }

    /* Except the first h2 */
    section:first-of-type h2 {
        page-break-before: avoid !important;
    }

    /* Make sure the grid display works nicely in print */
    .grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15pt !important;
    }

    /* Fix the grid layout on mobile */
    @media (max-width: 767px) {
        .grid {
            grid-template-columns: 1fr !important;
        }
    }

    /* Card styling for print */
    .rounded-3xl {
        border-radius: 6pt !important;
    }

    /* Card hover states for print */
    .hover\:shadow-md,
    .hover\:shadow-lg,
    .hover\:border-purple\/20,
    .hover\:border-purple\/30,
    .hover\:border-purple\/40 {
        border: 1pt solid rgba(112, 0, 255, 0.1) !important;
        box-shadow: 0 2pt 6pt rgba(0, 0, 0, 0.05) !important;
    }

    /* Typography enhancements */
    h1 {
        font-size: 20pt !important;
        font-weight: 300 !important;
        color: #111 !important;
        margin-bottom: 12pt !important;
    }

    h2 {
        font-size: 16pt !important;
        font-weight: 300 !important;
        color: #333 !important;
        margin-bottom: 10pt !important;
    }

    h3 {
        font-size: 11pt !important;
        font-weight: 500 !important;
        margin-bottom: 6pt !important;
    }

    p {
        font-size: 10pt !important;
        line-height: 1.5 !important;
        color: #444 !important;
    }

    .text-purple {
        color: rgba(112, 0, 255, 0.9) !important;
        print-color-adjust: exact !important;
        -webkit-print-color-adjust: exact !important;
    }

    /* Ensure all accent colors print correctly */
    .bg-purple,
    .bg-purple-light,
    .bg-purple-medium,
    .bg-purple\/10,
    .accent-dot,
    .bg-gray-100,
    .gradient-bg {
        print-color-adjust: exact !important;
        -webkit-print-color-adjust: exact !important;
    }

    /* Timeline adjustments */
    .timeline-section .absolute {
        position: absolute !important;
    }

    .timeline-section .w-px {
        width: 1pt !important;
        background-color: rgba(112, 0, 255, 0.2) !important;
        print-color-adjust: exact !important;
        -webkit-print-color-adjust: exact !important;
    }

    /* Blob decorations - convert to subtle backgrounds */
    .blob {
        border-radius: 50% !important;
        background: rgba(112, 0, 255, 0.05) !important;
        opacity: 0.5 !important;
        print-color-adjust: exact !important;
        -webkit-print-color-adjust: exact !important;
    }

    /* Purple accent styling */
    .accent-dot {
        background-color: rgba(112, 0, 255, 0.8) !important;
        print-color-adjust: exact !important;
        -webkit-print-color-adjust: exact !important;
    }

    /* Bullet point styling */
    ul {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    ul li {
        margin-bottom: 3pt !important;
    }

    /* Special styling for pricing section */
    .text-3xl {
        font-size: 16pt !important;
        font-weight: 300 !important;
        color: rgba(112, 0, 255, 0.9) !important;
        print-color-adjust: exact !important;
        -webkit-print-color-adjust: exact !important;
    }

    /* Handle tooltips in print */
    .tooltip {
        border-bottom: none !important;
    }

    .tooltip::after {
        content: attr(data-tooltip);
        display: block;
        font-size: 8pt;
        color: #777;
        margin-top: 4pt;
        font-style: italic;
    }

    .tooltiptext {
        display: none !important;
    }

    /* CTA section special handling */
    section:last-of-type {
        margin-top: 1cm !important;
        text-align: center !important;
        border-top: 1pt solid rgba(112, 0, 255, 0.1) !important;
        padding-top: 0.8cm !important;
    }

    section:last-of-type a {
        color: rgba(112, 0, 255, 0.9) !important;
        text-decoration: none !important;
        font-weight: 500 !important;
        print-color-adjust: exact !important;
        -webkit-print-color-adjust: exact !important;
    }

    section:last-of-type a.button-shine {
        display: inline-block !important;
        padding: 5pt 12pt !important;
        border: 1pt solid rgba(112, 0, 255, 0.9) !important;
        border-radius: 15pt !important;
        margin: 0 5pt !important;
    }

    /* Collaboration options highlights */
    .bg-purple\/10 {
        background: rgba(112, 0, 255, 0.05) !important;
        print-color-adjust: exact !important;
        -webkit-print-color-adjust: exact !important;
    }

    .bg-purple-light {
        background: rgba(112, 0, 255, 0.03) !important;
        print-color-adjust: exact !important;
        -webkit-print-color-adjust: exact !important;
    }

    /* Custom footer with logo imprint */
    .last-section::after {
        content: "codeuncode.com • Made with 💜 for House of Happy Leaf • " attr(data-print-date);
        display: block;
        text-align: center;
        font-size: 8pt;
        color: #999;
        margin-top: 1.5cm;
    }

    /* Ensure links are visible but not intrusive */
    a {
        color: inherit !important;
        text-decoration: none !important;
    }

    /* Fix mobile responsive elements in print */
    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Improved handling of flex layouts for mobile */
    .flex-col {
        display: block !important;
    }

    .md\:flex-row {
        display: flex !important;
    }

    /* Fix spacing of mobile-specific elements */
    .space-y-4,
    .space-y-6,
    .md\:space-y-0 {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .md\:space-x-4,
    .md\:space-x-6 {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Special flair - tiny leaf icon near page numbers */
    @page :not(:first) {
        @bottom-right {
            content: counter(page) " ";
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="6" height="6" viewBox="0 0 24 24" fill="rgba(112, 0, 255, 0.5)"><path d="M12,2C17.52,2,22,6.48,22,12c0,5.52-4.48,10-10,10S2,17.52,2,12C2,6.48,6.48,2,12,2z"></path></svg>');
            background-repeat: no-repeat;
            background-position: right center;
            padding-right: 10pt;
        }
    }

    /* Fix Tailwind classes that sometimes break in print */
    @media print {
        .print\:hidden {
            display: none !important;
        }

        .print\:block {
            display: block !important;
        }

        /* Force background colors to print */
        * {
            -webkit-print-color-adjust: exact !important;
            print-color-adjust: exact !important;
        }
    }

    /* Fix for Chrome PDF export */
    @media print {

        html,
        body {
            height: auto !important;
            overflow: visible !important;
        }
    }
}