@layer reset, base, layout, components, mobile-override;

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

@layer base {

    @view-transition {
        navigation: auto;
    }

    main {
        view-transition-name: main;
    }

    @keyframes fade-out-main {
        from {
            opacity: 1;
            transform: translateY(0);
        }
        to {
            opacity: 0;
            transform: translateY(40px);
        }
    }
    @keyframes fade-in-main {
        from {
            opacity: 0;
            transform: translateY(40px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    ::view-transition-old(main) {
        animation: 0.2s ease-out both fade-out-main;
    }


    ::view-transition-new(main) {
        animation: 0.4s ease-out both fade-in-main;
    }

    ::view-transition-old(main),
    ::view-transition-new(main) {
    /* keep background consistent while animating */
        background: transparent;
    }



    @font-face {
        font-family: "Clash Display"; 
        src: url(media/fonts/ClashDisplay-Variable.woff2) format("woff2-variations"); 
        font-display: swap;
    }
    @font-face {
        font-family: "Satoshi"; 
        src: url(media/fonts/Satoshi-Variable.woff2) format("woff2-variations"); 
        font-display: swap;
    }

    /* Default theme for JS-disabled userse */
    :root {
        --background-color: #f9f6ff;
        --background-highlight: #000000;
        --text-color: #7b7bc3;
        --text-color-hover: #6868be;
        --text-color-active: #5656be;
        --heading-text-color: #4848a2;
        --border-settings: 2px solid #7b7bc3;

        --border-radius: 0.5rem;
        --error-color: #ff8181;
        --error-field-color: #ffeaea;
        --verify-color: #00ac00;
    }

    :root[data-theme="light"] {
        --background-color: #f9f6ff;
        --background-highlight: #000000;
        --text-color: #7b7bc3;
        --text-color-hover: #6868be;
        --text-color-active: #5656be;
        --heading-text-color: #4848a2;
        --border-settings: 2px solid #7b7bc3;

        --border-radius: 0.5rem;
        --error-color: #ff8181;
        --error-field-color: #ffeaea;
        --verify-color: #00ac00;
    }

    :root[data-theme="dark"] {
        --background-color: #0B1215;
        --background-highlight: #FFFFFF;
        --text-color: #5A86AD;
        --text-color-hover: #9CCBFF;
        --text-color-active: #7AAFFF;
        --heading-text-color: #C3DDF6;
        --border-settings: 2px solid #5A86AD;

        --border-radius: 0.5rem;
        --error-color: #ff8181;
        --error-field-color: #ffeaea;
        --verify-color: #00ac00;
    }

    body {
        font-family:'Satoshi', Tahoma, Geneva, Verdana, sans-serif;
        line-height: 1.5;
        display: flex;
        flex-direction: column;
        align-items: center;
        min-height: 100dvh;
        background-color: var(--background-color, white);
        color: var(--heading-text-color, black);
    }

    h1,h2,h3,h4,h5,h6 {
        font-family: 'Clash Display', Tahoma, Geneva, Verdana, sans-serif;
        font-weight: 600;
        line-height: 1.15;
    }

    h1 {
        font-size: 3rem;
        margin-bottom: 0.5rem;
    }
    h1+p {
        margin-bottom: 1rem;
    }
    h2 {
        font-size: 2rem;
        margin-bottom: 1rem;
    }
    h3 {
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }
    picture img {
        border: var(--border-settings, 1px solid black);
        border-radius: var(--border-radius, 0.5rem);
    }
    svg path {
        fill: var(--heading-text-color, black);
    }
}

@layer layout {
    header {
        background-color: var(--background-color, white);
        border-bottom: var(--border-settings, 1px solid black);
        width: 100%;
        margin-bottom: 2rem;

        /* Hide burger menu by default on desktop */
        #burger-menu {
            display: none;
        }
        .logo {
            font-family: "Clash Display", Tahoma, Geneva, Verdana, sans-serif;
            font-weight: 600;
            font-size: 1.5rem;
            text-decoration: none;
            color: var(--heading-text-color, black);
            width:fit-content;
        }
        .logo:hover {
            color:  var(--text-color-hover, black);
        }
        nav {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            align-items: center;
            justify-content: space-around;
            padding: 0.5rem 2rem;
            ul {
                list-style: none;
                position: static;
                display: flex;
                gap: 2rem;
                width: 100%;
                border: none;
                background-color: var(--background-color, white);
                a {
                    text-decoration: none;
                    color: var(--heading-text-color, black);
                    font-weight: 500;
                    font-family: "Clash Display";
                }
                a:hover {
                    color: var(--text-color-hover, black);
                }
            }
        }
        button {
            justify-self:end;
            background: none;
            cursor: pointer;
            border: none;
            text-align: right;
            width:fit-content;
            padding:0.5rem;
            svg path {
                stroke: var(--heading-text-color, black);
                fill: none;
            }
            svg path:hover {
                stroke: var(--text-color-hover, black);
            }
        }
    }

    main {
        padding: 0rem 1rem;
        width: 100%;
        max-width: 1200px;
        display:flex;
        flex: 1;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        section {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: fit-content;
            width: inherit;
        }
        .project-grid {
            display: flex;
            justify-content: center;
            align-items: start;
            project-card {
                width: 100%;
                height: fit-content;
                padding: 1rem 1rem 0.5rem;
                display:flex;
                flex-direction: column;
                align-items: center;
                text-align: center;
                picture {
                    width: 100%;
                    max-width: 400px;
                    aspect-ratio: 4 / 3;
                    display: block;
                }
                picture img, svg {
                    object-fit: cover;
                    width: 100%;
                    height: 100%;
                    display: block;
                    aspect-ratio: 4/3;
                    border: var(--border-settings, 1px solid black);
                    border-radius: var(--border-radius, 0.5rem);
                }
                h2, p {
                    margin: 1rem 0rem 0rem;
                }
                a {
                    background-color: var(--heading-text-color, black);
                    text-decoration: none;
                    color: var(--background-color, white);
                    padding: 0.5rem;
                    margin-top: 1rem;
                    border-radius: var(--border-radius, 0.5rem);
                    &:hover{
                        background-color: var(--text-color-hover, black);
                    }
                    &:active {
                        background-color: var(--text-color-active, black);
                    }
                }

            }
            .upcoming-project svg {
                object-fit: cover;
                width: 100px;
                height: 100px;
                padding: 1rem;
                margin-bottom: 0.5rem;
            }
        }
        #social-links {
            display: flex;
            flex-direction: row;;
            gap: 2rem;
            align-items: center;
            border: var(--border-settings, 1px solid black);
            border-radius: var(--border-radius, 0.5rem);
            section {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }
        }
        .page-section {
            text-align: center;
            display: flex;
            flex-direction: column;
            border: var(--border-settings, 1px solid black);
            border-radius: var(--border-radius, 0.5rem);
            width: 100%;
            max-width: 600px;            
            padding: 2rem;
            margin: 1rem 1rem 2rem;
            gap: 0.5rem;
            input,textarea {
                padding: 0.3rem;
                border-radius: var(--border-radius, 0.5rem);
                border: var(--border-settings, 1px solid black);
                font-family: 'Satoshi', Tahoma, Geneva, Verdana, sans-serif;
            }

            /* BEGIN Styling for HW4 */
            label:has(+ input:required)::after,
            label:has(+ textarea:required)::after,
            fieldset > legend::after {
                content: "*";
                color: var(--error-color);
            }

            /* no optional attributes exist for my form so :optional is not used */

            input:user-invalid, textarea:user-invalid {
                border-color: var(--error-color);
                background-color: var(--error-field-color);
            }

            input:user-valid, textarea:user-valid {
                border-color: var(--verify-color);
            }

            &:has(input:user-invalid) #form-error::before,
            &:has(textarea:user-invalid) #form-error::before {
                content: "You have invalid fields.";
                color: var(--error-color);  
                font-weight: bold;
            }

            &:has(input:user-valid):not(:has(input:user-invalid)) #form-error::before,
            &:has(textarea:user-valid):not(:has(input:user-invalid, textarea:user-invalid)) #form-error::before {
                content: "All filled fields look good!";
                color: var(--verify-color);
                font-weight: bold;
            }

            .form-message {
                position: relative;
                height: 1.5rem;
                text-align: center;
                output {
                    position: absolute;
                    top: 50%;
                    left: 0;
                    width: 100%;
                    text-align: center;
                    font-weight: bold;
                }
                #form-error {
                    color: var(--error-color);
                    transition: opacity 0.4s ease;
                }

                #form-info {
                    color: var(--verify-color);
                    transition: opacity 0.4s ease;
                }
            

            }

            /* END Styling for HW4 */

            fieldset {
                border: none;
            }
            ul,p,label,fieldset,summary {
                text-align: left;
                align-self: start;
                list-style-position: inside;
            }
            p, ul {
                margin-bottom: 1rem;
            }
            details,summary {
                align-self: start;
                text-align: left;
                list-style-position: inside;
                p {
                    padding: 1rem 0rem;
                    margin: 0rem;
                    font-style: italic;
                }
                li {
                    font-style: italic;
                }
            }
            img {
                width: 60%;
                aspect-ratio: 1/1;
                object-fit: cover;
                height: auto;
            }
            button {
                background-color: var(--heading-text-color, black);
                text-decoration: none;
                color: var(--background-color, white);
                margin-top: 1rem;
                padding: 0.5rem;
                border-radius: var(--border-radius, 0.5rem);
                border: none;
                font-family: 'Satoshi', Tahoma, Geneva, Verdana, sans-serif;
                &:hover{
                    background-color: var(--text-color-hover, black);
                }
                &:active {
                    background-color: var(--text-color-active, black);
                }
            }
        }

        /* For project case study pages */
        article {
            max-width: 1000px;
            text-align: left;
            margin: auto;
            h1 {
                text-align: center;
                margin-bottom: 2rem;
            }
            figure {
                text-align: center;
                margin-bottom: 1rem;
            }
            figcaption {
                margin: auto;
                margin-top: 0.5rem;
                font-style: italic;
                width: 80%;
            }
            picture img {
                width: 80%;
                height: auto;
                display: block;
                margin: 0rem auto 1rem;
                border: 1px solid black;
            }
            section {
                width: 80%;
                align-items: start;
                margin: auto;
                h2,h3,p,iframe {
                    margin: 0rem 0rem 1rem;
                }
                iframe {
                    width: 100%;
                    border: 1px solid black;
                }
            }
            ul {
                list-style-position: inside;
                margin-bottom: 1rem;
                align-self: start;
            }
        }
    }

    footer {
        background-color: var(--background-color, white);
        border-top: var(--border-settings, 1px solid black);
        border-radius: var(--border-radius, 0.5rem);
        width: 100%;
        display:flex;
        align-items: center;
        justify-content: center;
        margin-top: 1rem;
        padding: 1rem 1.5rem;
        p {
            font-family: "Clash Display", Tahoma, Geneva, Verdana, sans-serif;
            font-weight: 400;
        }
    }
}

@layer components {
    dialog {
        margin: auto;
        text-align: center;
        padding: 1rem 2rem;
        color: var(--heading-text-color, black);
        background-color: var(--background-color, white);
        border: var(--border-settings, 1px solid black);
        border-radius: var(--border-radius, 0.5rem);
        header {
            font-size: 1.5rem;
            font-weight: bold;
            margin-bottom: 1rem;
            border: none;
        }
        form {   
            display: block;
            flex-direction: column;
            gap: 1rem;
        }
        footer {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            border: none;
            padding: 0rem 0rem 1rem;
        }
        button {
            background-color: var(--heading-text-color, black);
            text-decoration: none;
            color: var(--background-color, white);
            padding: 0.5rem;
            border-radius: var(--border-radius, 0.5rem);
            border: none;
            font-family: 'Satoshi', Tahoma, Geneva, Verdana, sans-serif;
            &:hover{
                background-color: var(--text-color-hover, black);
            }
            &:active {
                background-color: var(--text-color-active, black);
            }
        }
    }
}

@layer mobile-override {
    @media only screen and (max-width: 600px) {
        .project-grid, #social-links {
            flex-direction: column;
        }
        article section, article picture img {
            width: 100%;
        }
        /* Mobile menu navbar */
        header {
            #burger-menu {
                display: inline-block;
                text-align:left;
                color: var(--heading-text-color, black);
                font-weight: 500;
                font-family: "Clash Display";
                font-size: 1rem;
            }
            nav {
                grid-template-columns: auto;
                justify-self: start;
                ul[popover] {
                    flex-direction: column;
                    gap: 1rem;
                    display: none;

                    transition: opacity 0.25s ease, transform 0.25s ease;
                    opacity: 0;
                    transform: translateY(-10px);
                }
                ul[popover]:popover-open {
                    display: flex;
                    padding: 2rem;
                    border-bottom: var(--border-settings, 1px solid black);

                    /* Animate popover menu opening */
                    opacity: 1;
                    transform: translateY(0);
                    li {
                        width: 100%;
                    }
                    @starting-style {
                        opacity: 0;
                        transform: translateY(-10px);
                    }
                }
            }
            .logo {
                display: none;
            }
            /* Remove theme picker since "commandfor" which it uses is not widely supported on mobile yet */
            button {
                display: none;
            }
        }
    }
}