@view-transition {
    navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation: fade 300ms ease-in-out both;
}

@keyframes fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    font-family: 'Rubik', sans-serif;
    color: var(--dark);
    background-color: var(--white) !important;
    font-size: 1.1rem;
    line-height: 1.5;
}

a {
    text-decoration: none;
    color: var(--dark);
}

/** my favorite palette */
:root {
    --dark: #01161E;
    --medium-dark: #124559;
    --half-tone: #598392;
    --light-tone: #AEC3B0;
    --white: #FFF;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* #region Main Page */

#container {

    margin:auto;
}

.hidden {
    display: none !important;
}

#featured, main, #footerContainer {
    max-width: 96rem;
    margin: 0 auto;
}

nav {
    #navControls {
        display: grid;
        grid-template-columns: 2fr 1fr 2fr;
        background-color: var(--light-tone);
        .navLinkControl {
            display: flex;
            align-items: center;
            #logoSpace {
                width: 100%;
                height: 100%;
                
                font-size: 2rem;
                align-self: center;
                justify-content: center;
                margin: auto;
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                align-items: center;
                justify-items: flex-end;
            }
        }
        #topNavLinks {
            width: 100%;
            display: grid;
            grid-template-columns: 3.5fr 1fr 1fr 1fr;
            text-align: center;
            height: 100%;
            align-items: center;
            justify-items: center;
            .searchControl {
                position: relative;
            }
            #searchInput {
                width: 90%;
                font-size: 1.1rem;
                padding: 1rem;
                border: 1px solid #BBB;
                box-shadow: 3px 1px 5px #ddd inset;
            }
            #searchResults {
                position: absolute;
                left: 0;
                z-index: 99999;
                top: 68px;
                border: 1px solid #BBB;
                width: 100%;
                text-align: left;
                margin-right: 0;
                #resultsList {
                    display: flex;
                    flex-direction: column;
                    gap: 1rem;
                    text-align: left;
                    padding: 1rem;
                    .resultsItem {
                        place-items: flex-start;
                        padding: 0.5rem 0;
                        cursor: pointer;
                        font-size: 1.1rem;
                        border-bottom: 1px solid #ddd;
                        &:hover {
                            font-size: 1.1rem;
                            border: 1px solid;
                            border-top: none;
                            border-right: none;
                            border-left: none;
                            border-image-source: linear-gradient(to right, #bbb, rgba(0, 0, 255, 0.99));
                            border-image-slice: 1;
                            animation: 100ms;
                        }
                    }
                }
            }
        }
    }
}

#topNavLinks li {
    height: 100%;
    width: 100%;
    display: grid;
    place-items: center;
}

#logoSpace img {
    max-height: 4rem;
    align-items: flex-end;
    padding: 0.5rem 1rem;
}

#logoSpace span {
    width: 100%;
    text-align: left;
    height: 100%;
    align-content: center;
    padding: 1.65rem 0 0 0;
}

.navLinkControl a {
    text-decoration: none;
}

.navLinkControl a:hover {
    color: var(--medium-dark);
}

#featured {
    display: grid;
    grid-template-columns: 2fr 3fr;
    min-height: 22rem;
    #intro {
        padding: 2rem;        
        display: flex;
        flex-direction: column;
        gap: 1rem;
        .introMessage {
            font-size: 1rem;
            text-align: justify;
            line-height: 1.5;
            .msgTitle {
                display: block;
                font-weight: 500;
                line-height: 2;
            }
        }
    }
    #featuredProject {
        position: relative;
        padding: 2rem;
        font-size: 1.2rem;
    }
}

#featuredProject::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    opacity: 0.5;
    z-index: -1;
}

main {
    display: grid;
    grid-template-rows: 4fr 1fr;
    width: 100%;
        max-width: 96rem;
    #postsCarousel {
        
        padding: 1rem;
        display: flex;
        
        flex-direction: column;
        gap: 1rem;
        .postsFilters {
            display: flex;
            flex-direction: row;
            justify-content: left;
            align-items: center;
            flex-wrap: wrap;
            gap: 1rem;
            font-size: 1.2rem;
            .filter {
                padding: 0.5rem 1rem;
                border-radius: 6px;
                background-color: var(--light-tone);
                cursor: pointer;
                &:hover {
                    background-color: var(--half-tone);
                    color: var(--white);
                }
            }
        }
        #carouselHeader {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            h3 {
                font-size: 1.5rem;
                font-weight: 500;
            }
        }
        #carouselHeader h3, .postsFilters {
            color: var(--dark);
        }
        #postContainer {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(2, auto);
            gap: 1rem;
            height: 26rem;
            overflow: hidden;
            .post {
                line-height: 1;
                height: 12rem;
                display: flex;
                align-items: center;
                justify-content: center;
                box-shadow: 3px 3px 6px var(--light-tone);
                border: 1px solid var(--light-tone);
                border-radius: 0 0 15px 0;
                .postPreview {
                    padding: 1rem;
                    max-height: 11rem;
                    overflow: hidden;
                    .postTitle {
                        font-size: 1.5rem;
                        display: flex;
                        flex-direction: column;
                        padding-bottom: 1rem;
                        max-height: 4.5rem;
                        .postDate {
                            font-size: 0.75rem;
                        }
                    }
                }
                .postImage {
                    padding: 0 1rem;
                }
            }
        }
    }
    #myFeed {
        
        padding: 1rem;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1rem;
    }
}

footer {
    width: 100%;
    height: 5rem;
    background-color: var(--light-tone);
    margin-top:auto;
    #footerContainer {
        display: grid;
        grid-template-columns: 3fr 1fr;
        align-items: center;
        height: 100%;
        #footerLinksContainer {
            
            #footerLinks {
                width: 100%;
                height: 100%;
                list-style: none;
                display: flex;
                flex-direction: row;
                gap: 2rem;
                margin-left: 2rem;
            }
        }
    }
    
}

#footerLinks li{
    display: inline-block;
    padding: 1rem;
}

#footerLinks li a {
    color: var(--dark);
    text-decoration: none;
    font-size: 1.2rem;
}

@media screen and (max-width: 1200px) {
    #postContainer {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .invisibleOnMobile {
        display: none !important;
    }
    #navControls {
        grid-template-columns: 1fr 2fr !important;
    }
}


@media screen and (max-width: 768px) {
    #footerLinks {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 0 !important;
    }

    #copyMessage {
        background: var(--light-tone);
    }

    .invisibleOnMobile {
        display: none !important;
    }

    #footerContainer {
        background-color: var(--light-tone);
    }

    #featured {
        grid-template-columns: 1fr;
        #intro {
            font-size: 1.2rem;
            padding: 1rem;
            display: flex;
            text-align: justify;
            align-items: center;
        }
    }

    #carouselHeader {
        max-width: 90%;
    }
    
    .post > * {
        min-width: 0 !important;
    }
    #carouselHeader h3 {
        margin: 0 !important;
    }

    #postsCarousel {
        .postsFilters {
            gap: 0 !important;
            .filter {
                border-radius: 0 !important;
                padding: 0.5rem !important;
                border: 1px solid var(--medium-dark) !important;
            }
        }
        #postContainer {
            grid-template-columns: 1fr !important;
            grid-template-rows: 1fr !important;
            height: auto !important;
            .post {
                display: grid !important;
                grid-template-columns: auto;
                grid-template-rows: 40% 60%;
                height: 20rem !important;
                border: none !important;
                border-radius: 0 !important;
                box-shadow: none !important;
                border-bottom: 2px solid var(--light-tone) !important;
                padding-bottom: 2rem;

                .postPreview {
                    line-height: 0.95;
                }
                .postTitle, .postPreview {
                    overflow: hidden;
                    overflow-wrap: anywhere;
                    height: 100% !important;
                    display: flex;
                    flex-direction: column;
                    flex-wrap: wrap;
                    justify-content: start;
                    padding: 0 !important;
                }
                .imgHolder {
                    width: 100%;
                    height: 100%;
                    padding: 0 !important;
                    .postImage {
                        width: inherit !important;
                        height: inherit !important;
                        object-fit: cover !important;
                        padding: 0 !important;
                    }
                }
            }
        }
    }

    #myFeed {
        max-height: 5rem;
    }

    nav {
        #navControls {
            grid-template-columns: 1fr !important;
            #topNavLinks {
                grid-template-columns: 1fr 1fr 1fr;
                grid-template-rows: auto;
            }
            #logoSpace {
                grid-template-columns: repeat(2, 1fr) !important;
            }
        }
    }

    #topNavLinks li:first-child {
        grid-column: 1 / -1;
    }

    #topNavLinks li a {
        padding: 1rem;
    }

    #featured {
        #featuredProject {
            height: 27rem !important;
            padding: 1rem !important;
        }
    }
    
    footer {
        #footerContainer {
            grid-template-columns: 1fr;
            text-align: center;
        }
        
        #footerLinksContainer {
            margin-top: 1rem;
        }

        #footerLinks {
            width:auto !important;
        }
    }

    main {
        grid-template-rows: 1fr 5rem;
    }
    
}

/* #endregion Main Page */

/* #region Blog Post Page */

.postPageContent {
    max-width: 96rem !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: auto;
}

.postSection {
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.postSectionImg {
    max-width: 100%;
}



/* #endregion Blog Post Page */