/* I saw this sort of file in projects online and even the Codex in class had something similar, albeit MUCH more complex*/
body {
    background-color: #f8f9fa;
}

.resume-preview {
    font-family: 'Times New Roman', serif;
    font-size: 11pt;
    line-height: 1.4;
    color: #000;
    max-width: 750px;
    margin: 0 auto;
    padding: 1rem;
}

.resume-preview h2 {
    font-size: 20pt;
    font-weight: bold;
    margin-bottom: 0;
    text-align: center;
}

.resume-preview .resume-contact {
    text-align: center;
    font-size: 10pt;
    margin-bottom: 0.5rem;
    color: #333;
}

.resume-preview-section {
    margin-top: 0.75rem;
    border-top: 1px solid #000;
    padding-top: 0.25rem;
}

.resume-preview-section h3 {
    font-size: 12pt;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.resume-job-header {
    gap: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.resume-preview ul {
    margin: 0.25rem 0 0.5rem 1.25rem;
    padding: 0;
}

.resume-preview li {
    margin-bottom: 0.2rem;
}

.resume-preview-section p {
    margin-bottom: 0.2rem;
}

/* AI Generated Resume Style*/
.resume-preview h2,
.resume-preview h3 {
    margin-bottom: 0.5rem;
}

.resume-preview-section {
    margin-top: 1rem;
}

@media print {

    html,
    body {
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    /* target header and logo so it doesnt appear */
    .container header, 
    header.d-flex,
    nav,
    footer {
        display: none !important;
    }

    /* Absolutely mercilessly KILL Bootstrap flex layout for print (assassination for messing with my print feature)*/
    body.d-flex {
        display: block !important;
        min-height: 0 !important;
    }

    body.d-flex > .flex-grow-1 {
        display: block !important;
        flex: none !important;
        min-height: 0 !important;
    }

    .flex-grow-1 {
        flex: none !important;
        min-height: 0 !important;
    }

    .container {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        max-width: 100% !important;
    }

    #resumeSection {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #resumeSection > h3 {
        display: none !important;
    }

    .row {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .col-lg-5 {
        display: none !important;
    }

    .col-lg-7 {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
    }

    .card {
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    h1 {
        display: none !important;
    }

    .resume-preview {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* tighten bullet spacing slightly */
    .resume-preview ul {
        margin-bottom: 0.2rem !important;
        padding-left: 1rem !important;
    }

    .resume-preview li {
        margin-bottom: 0.1rem !important;
        line-height: 1.2 !important;
    }

    .resume-preview-section:last-child {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    .resume-preview-section,
    ul,
    li {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }

    * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}