@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Archivo+Black&display=swap');

/* Custom Components */
.neo-input {
    border: 2px solid black;
    padding: 0.75rem;
    font-weight: 600;
    background: white;
    box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 1);
    transition: all 0.1s;
}

.neo-input:focus {
    outline: none;
    box-shadow: 2px 2px 0px 0px rgba(0, 0, 0, 1);
    transform: translate(2px, 2px);
    background: #fff7ed;
}

.neo-btn {
    border: 2px solid black;
    box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 1);
    transition: all 0.1s;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.neo-btn:active {
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 1);
    transform: translate(4px, 4px);
}

/* Print Styles */
@media print {

    /* Hide everything by default */
    body>* {
        display: none !important;
    }

    /* Ensure BOM section is visible and positioned correctly */
    body>main {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Hide the grid columns (Inputs & Chat) specifically to be safe */
    .grid {
        display: none !important;
    }

    /* Show only the BOM section */
    #bom-section {
        display: block !important;
        visibility: visible !important;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        margin: 0 !important;
        box-shadow: none !important;
        /* Clean look for print */
        border: 2px solid black !important;
    }

    /* Ensure the inner container of BOM is visible */
    #bom-section>div {
        box-shadow: none !important;
        border: none !important;
    }

    /* Hide the disclaimer and print button */
    #bom-section .no-print,
    #bom-section button {
        display: none !important;
    }

    /* Additional Helper */
    .no-print {
        display: none !important;
    }
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.3s ease-out forwards;
}

/* Prose / Markdown Styles for Chat */
.prose ul {
    list-style-type: disc;
    padding-left: 1.25em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.prose ol {
    list-style-type: decimal;
    padding-left: 1.25em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.prose strong {
    font-weight: 800;
    color: #ea580c;
    /* brand-600 */
}

.prose p {
    margin-bottom: 0.5em;
}

.prose p:last-child {
    margin-bottom: 0;
}