/* CSS Refactor - imports */

@import url("./variables.css");
@import url("./global.css");
@import url("./nav.css");
@import url("./home.css");
@import url("./resume.css");
@import url("./projects.css");
@import url("./animations.css");
@import url("./svg.css");
@import url("./footer.css");


@media screen and (max-width: 1200px) {
    .download-link {
        position: absolute;
    }
}


/* BREAKPOINTS -------- */

/* TABLET (≥550px) */
@media (min-width: 34.375rem) {
    .home .content-wrapper {
        padding: 1.8rem;
    }

    .content-bg {
        padding: 1.8rem;
    }

    .resume header::before {
        block-size: 375px;
    }

    h1 {
        font-size: 4rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    p {
        font-size: 1rem;
    }

    .contact-content {
        display: grid;
        grid-template-columns: 40% 2fr;
        align-items: center;
        gap: 1rem;
    }

    .contact-popover {
        max-inline-size: min(90vw, 40rem);
        background-color: var(--accent-light-green);
        height: 100%;
    }

    .contact-photo {
        border-radius: 0.35rem;
    }
}


/* --------------LARGE SCREEN ------------------- */
@media (min-width: 68.75rem) {
    .work-item {
        display: grid;
        grid-template-columns: 1fr 2fr;
        column-gap: 1.25rem;
    }

    .work-summary p:first-child {
        margin-block-start: 0;
    }

    footer {
        display: flex;
        justify-content: space-between;
        padding-block: 0;
        padding-inline: 1.25rem;
        text-align: start;
    }

    .page-projects header::before {
        block-size: 375px;
    }

    .navWrap {
        display: flex;
        justify-content: space-between;
        grid-template-columns: 100px minmax(auto, 1100px);
        height: auto;
        padding: 0 2.5rem;
    }

    nav {
        position: initial;
        inset: auto;
        z-index: auto;
    }

    nav ul {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin: 0;
    }

    nav::after,
    nav ul li:last-of-type::before {
        display: none;
        padding: initial;
    }


    .page-projects .project-wrapper {
        display: grid;
        grid-template-columns: repeat(3, auto);
        margin-block-end: 4rem;
        gap: 2rem;
    }

    label[for="navToggle"] {
        display: none;
    }

    #contactPopover {
        position: absolute;
        inset-block-start: -13rem;
        inset-inline-end: -32.5rem;
        padding: 2.5rem;
        max-inline-size: 60vw;
        margin-block-start: 17rem;
        block-size: 30vh;
    }

    .contact-content {
        display: grid;
        grid-template-columns: 45% 1fr;
        align-items: center;
        gap: 1rem;
    }

    .contact-photo {
        inline-size: 90%;
        margin: -1rem auto;
    }

}