/* Caleb Lyons - 3/22/2026 - Midterm Project for HTML/CSS */

@font-face {
    font-family: Montserrat;
    src: url(Fonts/Montserrat-VariableFont_wght.ttf);
}

@font-face {
    font-family: WorkSans;
    src: url(Fonts/WorkSans-VariableFont_wght.ttf);
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 6rem;
}


/* Website is responsive for tablet and mobile */

.showOnMobile, .showOnTablet, .readingmore {
    display: none;
}

body {
    background-color: white;
    margin: calc(100vh + 3rem) 4vw 30vh 4vw;
    font-family: WorkSans, Tahoma, sans-serif;
    text-wrap: balance;
    text-wrap-style: pretty;
}

a {
    color: rgb(55, 96, 162);
    font-weight: 500;
}

.nounderline {
    text-decoration: none;
}

h2 {
    font-family: Montserrat, sans-serif;
    font-weight: "600";
    padding-bottom: 0.5rem;
    font-size: 2.30rem;
}

h3 {
    margin-top: 2.5rem;
    font-size: 0.95;
    font-weight: 600;
    max-width: fit-content;
}

h3:first-child {
    margin-top: 0;
}

p {
    font-family: WorkSans, "WorkSans", Tahoma, sans-serif;
    line-height: calc(0.95rem * 1.85);
    margin: 0.75rem 0;
    font-size: 0.95rem;
    max-width: 50rem;
}


img {
    object-fit: cover;
    border-radius: 0.5rem;
    max-inline-size: 100%;
    width: 60vh;
    height: 60vh;
}


/* This is the first time I've done this, but apperently you can nest selectors inside of selectors? Sort of like how media queries work. 
It's still too new to validate in the CSS Validator you gave us,
but I found it to be a really handy way to organize my code.  */

/* Default div grouping for all pages */

main {
    max-width: 65rem;
    width: 100%;
    align-self: center;
    justify-self: center;

    > div {
        margin: 8rem 0;

        > div {
            width: 100%;
            padding: 0;
            margin: 1.5rem 0;
            display: flex;
            gap: 1rem;
            justify-content: center;

            img {
                width: 100%;
            }

            > div {
                flex: 110;
                flex-wrap: wrap;

            }
        }
    }

    .projectcards div {
        color: black;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(45vh, 1fr));
        gap: 1rem;

        div {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;

            span {
                display: flex;
                flex-direction: row;
                align-items: center;
                padding-right: 0.5rem;
                margin: 0;

                img {
                    margin-left: auto;
                    width: 1.5rem;
                    height: 1.5rem;
                    rotate: 180deg;
                    filter: invert(1);
                    z-index: -1;
                }
            }
        }
    }
}  


/* button and <a> links disguised as buttons get the same styling */

.button, button {
    font-family: WorkSans, "WorkSans", Tahoma, sans-serif;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    height: 3.125rem;
    width: fit-content;
    max-inline-size: 100%;
    border-radius: 0.313rem;
    border: none;
    background-color: rgba(255, 255, 255, 0);
    padding: 0 1.563rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    color: rgb(211, 211, 211);

    img {
        height: 1.5rem;
        width: 1.5rem;
    }

    .down {
        margin-left: auto;
        height: 1rem;
        width: 1rem;
    }

    .right {
        margin-left: auto;
    }
}

li {
    line-height: 0;
    .button, button {
        height: 2.188rem;
        width: 100%
    }
}

.button:hover, button:hover {
    background-color: rgba(255, 255, 255, 0.137);
    color: white;
}

.button:hover, button:hover {
    background-color: rgba(255, 255, 255, 0.137);
    color: white;
}

#readmore {
    width: 100%;
    height: 3rem;
    display: flex;
    appearance: none;
}

label {
    position: relative;
    padding: 1rem;
    cursor: pointer;
    background-color: rgb(227, 227, 227);
}

input[type="checkbox"]:checked ~ label {
    display: none;
}

.readingmore:has(~ input[type="checkbox"]:checked) {
    display: block;
}

/* wrapper for the sticky nav bar, this is the only way I could get it to float */

#wrapper {
    width: 100%;
    max-width: 100vw;
    position: fixed;
    left: 0;
    top: 0;
    padding: 2vw 3vw;
    color: white;

    div {
        padding: 0.313rem;
        border-radius: 0.625rem;
        box-shadow: 0 0.313rem 0.625rem rgba(0, 0, 0, 0.127);
        background-color: rgba(4, 0, 34, 0.646);
        backdrop-filter: blur(0.625rem);
        width: 100%;
        max-width: 100vw;
        display: flex;
        flex-direction: row;
        justify-content: flex-end; 

        :first-child {
            margin-right: auto;
            color: white;
            min-width: max-content;
            font-family: Montserrat, sans-serif;
            font-weight: 600;
            font-size: 1.1rem;
        }

        span {
            padding: 0;
            margin: 0;

            a {
                padding-right: 0.313rem;
                border-radius: 0.313rem 0 0 0.313rem;
            }

            button {
                padding-right: 0.938rem;
                padding-left: 0.188rem;
                border-radius: 0 0.313rem 0.313rem 0;
            }

            a:hover, button:hover {
                background-color: rgba(255, 255, 255, 0.1);
                color: white;
            }
        }

        > span:hover {
            background-color: rgba(255, 255, 255, 0.1);
            color: white
        }
    }


    /* H1 has to go over here to overwrite the button styling. The H1 is the "Caleb Lyons" button that brings you back to the homepage */

    h1 {
        font-family: Montserrat, sans-serif;
        font-weight: 600;
        font-size: 1rem;
        font-weight: 500;
    }


    /* declaring where each popover menu should anchor-position to */ 

    .nav {
        anchor-name: nav;
    }
    .downloads {
        anchor-name: downloads;
    }
    .contacts {
        anchor-name: contacts;  
    }
    .contactsmobile {
        anchor-name: contactsmobile;  
    }
    .exports {
        anchor-name: exports;  
    }
}


/* The popover menu itself */

.menu {
    width: fit-content;
    height: fit-content;
    padding: 0.313rem;
    border-radius: 0.625rem;
    box-shadow: 0 0.313rem 0.625rem rgba(0, 0, 0, 0.127);
    background-color:  rgba(4, 0, 34, 0.646);
    backdrop-filter: blur(0.625rem);
    border-width: 0;
    overflow: hidden;

    .button, button {
        overflow: hidden;
        width: 100%;
        max-inline-size: 100%;
        max-width: 100%;
        border-radius: 0.313rem;
        border: none;
        background-color: rgba(255, 255, 255, 0);
        padding: 0.313rem 0.625rem;
        cursor: pointer;
        color: rgb(211, 211, 211);
    }

    .button:hover, button:hover {
            background-color: rgba(255, 255, 255, 0.137);
            color: white;
        }
    
    }

#nav {
    position: fixed;
    position-anchor: nav;
    position-area: bottom span-right;
    min-width: max-content;
    margin: initial;
    transform: translate(-2.188rem, 0.625rem);
}

#downloads {
    position: fixed;
    position-anchor: downloads;
    position-area: bottom span-right;
    min-width: max-content;
    margin: initial;
    transform: translate(-1.875rem, 0.625rem);
}

#contacts {
    position: fixed;
    position-anchor: contacts; 
    position-area: bottom span-left;
    min-width: max-content;
    transform: translate(0.4rem, 0.625rem);
}

#contactsmobile {
    position: fixed;
    position-anchor: contactsmobile; 
    top: anchor(top);
    left: anchor(right);
    min-width: max-content;
    margin: initial;
    transform: translate(0.625rem, 0);
}

#exports {
    position: fixed;
    position-anchor: exports; 
    top: anchor(top);
    left: anchor(right);
    min-width: max-content;
    margin: initial;
    transform: translate(0.625rem, 0);
}


/* Splash screen banner */

.banner {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0;
    margin: 0;
    z-index: -1;
    width: 100vw;
    height: 100vh;
    background-image: url(Images/placeholder.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    max-width: 100%;
    display: flex;
    align-items: end;
    padding: auto;

    > div {
        padding: 4vw;
        max-width: max(46.875rem, 50vw);
        width: 100vw;
        height: fit-content;
        color: white;
        flex-direction: column;
        gap: 0;
        div {
            margin-top: 1rem;
        }
        
        h2 {
            font-size: clamp(3rem, 10vw, 5rem);
        }

        p {
            font-weight: 500;
        }

        a {
            font-weight: 600;
            color: rgb(161, 188, 232);
        }

        .button {
            background-color: white;
            color: rgb(33, 33, 33);
            img {
                filter: invert(100%);
            }
        }

        .button:first-child {
            background-color: rgba(0, 0, 0, 0);
            border: white solid;
            color: white;
            img {
                filter: none;
            }
        }

        .button:hover {
            background-color: rgb(232, 232, 232);
            color: black;
        }

        div {
            display: flex;
            gap: 1rem;
        }
    }
}


/* Hovering over buttons sometimes changes their icon, depending if they have a special action. Ex: copying */

.copy:hover img {
    content: url(Icons/copy.svg);
}

.copy:active img {
    content: url(Icons/copied.svg);
}

.download:hover img {
    content: url(Icons/download.svg);
}

.download:active img {
    content: url(Icons/downloaded.svg);
}

.external:hover img {
    content: url(Icons/external.svg);
}


/* Styling for any project pages, like the Colorado one */

.project {
    background-color: rgb(69, 69, 77);
    margin-top: calc(4vw + 3rem);
    overflow-x: hidden;

    main > div {
        margin: auto;
        align-items: center;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;

        img {
            object-fit: cover;
            width: 100%;
            height: fit-content;
            max-width: 150vh;
        }
    }
}


/* Media queries for tablet */

@media (max-width: 750px) {
    
    .hideOnTablet {
        display: none;
    }

    .showOnTablet {
        display: inline;
    }
    

    /* Changing the contact me popover that nests underneath my name to pop down instead of right. So that it doesn't overflow out of the page on smaller screens */

    #contactsmobile {
        position-area: bottom span-left;
        transform: translate(0.313rem, 0.625rem);
        position: fixed;
        top: anchor(bottom);
        right: anchor(right);
        margin: initial;
    }
    

    /* Since on table there is not ability to hover over buttons to preview what they do, the icons need to display their hover icons always */

    img.right {
        content: url(Icons/down.svg);
        height: 1rem;
        width: 1rem;
    }

    .copy img {
        content: url(Icons/copy.svg);
    }

    .download img {
        content: url(Icons/download.svg);
    }

    .external img {
        content: url(Icons/external.svg);
    }

    .banner {
        height: 90vh;
    }


    /* Making images smaller and reversing the flex direction to display image for text */

    main {
        img {
            width: 50vh;
            height: 50vh;
        }
        
        div div {
            flex-direction: column-reverse;
        }

        
        .projectcards div {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(40vh, 1fr));
        }
    }
}


/* Media query for mobile */

@media (max-width: 425px) {
    .hideOnMobile {
        display: none;
    }

    .showOnMobile {
        display: inline;
    }

    
    /* This was hard. All of my work so far has been presented in 1920x1080 PDF presentations, which is normally fine for desktop. 
    However, its awful for mobile users because even at max scale, they're tiny and you can see like 6 slides simutaneously.
    The best solution I could come up with was by changing the entire page to a scroll right sort of deal, where the user is zoomed in on everthing
    and reading everything left to right, sort of like reading a book. */

    .project {
        overflow-y: hidden;
        height: 100dvh;
        flex: none;
        margin: calc(4vw + 1rem) 0 4vw 0;

        main {
            height: 100%;
            margin: 0 0 5rem 0;

            > div {
                height: 100%;
                flex-direction: row;
                overflow-x: scroll;

                img {
                    width: 100vh;
                    height: min-content;
                    max-height: 80%;
                }

                :first-child {
                    margin-left: 4vw;
                }

                :last-child {
                    margin-right: 4vw;
                }
            }
        }
    }
}