/* ==========================================
   PRINT STYLESHEET
   ========================================== */

@page {
    size: A4;
    margin: 12mm;
}

@media print {

    html,
    body {
        background: #fff !important;
        color: #000 !important;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 10pt;
        line-height: 1.35;
        overflow: visible !important;
    }

    * {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    /* Hide website-only elements */

    .header,
    .footer,
    .sidebar,
    .mobile-nav,
    .btn-scroll-top,
    #overlay,
    #preloader,
    .head-bg,
    .head-bar,
    .timeline-bar,
    .dot,
    .arrow {
        display: none !important;
    }

    /* Reset layout */

    .wrapper,
    .content,
    .container {
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    section {
        margin: 0 0 12mm 0;
        page-break-inside: auto;
    }

    .section-title {
        margin-bottom: 8mm;
        color: #000;
    }

    /* -------------------------
       Skill boxes
       ------------------------- */

    .section-box {
        background: white !important;
        border: 1px solid #ccc;
        padding: 10px;
        margin-bottom: 10px;

        page-break-inside: avoid;
        break-inside: avoid;
    }

    .section-box h3 {
        margin-top: 0;
    }

    /* -------------------------
       Timeline
       ------------------------- */

    .timeline,
    .timeline-inner {
        display: block !important;
        overflow: visible !important;
    }

    .timeline-box,
    .timeline-box-left,
    .timeline-box-right {

        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 12px 0 !important;
        left: auto !important;
        right: auto !important;

        page-break-inside: avoid;
        break-inside: avoid;
    }

    .timeline-box-inner {

        display: block !important;
        background: white !important;
        border: 1px solid #ccc;
        padding: 12px;

        page-break-inside: avoid;
        break-inside: avoid;
    }

    .date {
        font-weight: bold;
        margin-bottom: 5px;
        clear:both !important;
    }

    ul {
        margin-top: 6px;
    }

    li {
        margin-bottom: 2px;
    }

    /* Don't split lists */

    ul,
    li {
        page-break-inside: avoid;
        break-inside: avoid;
    }

    /* Print links nicely */

    a {
        color: black !important;
        text-decoration: none;
    }

    /* Images */

    img {
        max-width: 100%;
        page-break-inside: avoid;
    }

    /* Optimizations */

    .animate-left,
    .animate-right,
    .animate-up,
    .animate-down,
    .animate {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    .timeline-box,
    .timeline-box-inner,
    .timeline-box-left,
    .timeline-box-right {
        position: static !important;
        float: none !important;
        left: auto !important;
        right: auto !important;
    }

    #experience,
    #work-experience,
    .resume-section.experience {
        break-before: page !important;
        page-break-before: always !important;
    }

    .resume-work {
        break-before: page !important;
    }

    #interests {
        display: none !important;
    }

    .section-title {
        break-after: avoid;
        page-break-after: avoid;
    }

    .timeline-box {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .section-box {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .timeline-box-inner {
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0 0 8mm 0 !important;
    }

    .timeline-box,
    .timeline-box-left,
    .timeline-box-right {
        float: none !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        left: auto !important;
        right: auto !important;
    }    

    .date {
        display: block !important;
        text-align: right;
        float: none !important;
        clear: none !important;
        font-weight: bold;
        color: #555;
    }

    h3 {
        margin: 0;
        clear:both !important;
    }

    h4 {
        margin: 2mm 0 3mm;
    }

    .timeline-box {
         /* Space inside the current entry */
        padding-bottom: 4mm;

        /* Space before the next entry */
        margin-bottom: 8mm;
    }

    .timeline-box:last-child {
        border-bottom: none;
    }

    .timeline-box {
        position: relative;
        margin-bottom: 10mm;
        padding-bottom: 0;
    }

    .timeline-box::after {
        content: "";
        display: block;
        margin-top: 4mm;   /* distance from content to line */
        margin-bottom: 6mm; /* distance from line to next job */
    }

    .timeline-box:last-child::after {
        display: none;
    }

    .timeline,
    .timeline-inner,
    .timeline-box,
    .timeline-box-left,
    .timeline-box-right,
    .timeline-box-inner,
    .description {

        position: static !important;

        display: block !important;

        float: none !important;

        width: 100% !important;
        max-width: 100% !important;

        min-width: 0 !important;

        left: auto !important;
        right: auto !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        transform: none !important;

        box-sizing: border-box !important;
    }


    .description {

        padding: 5px !important;

        margin-top: 5px !important;
        margin-bottom: 10px !important;

        text-align: left !important;

        clear: none !important;

    }

}