/* ---------------------------- Reset Styles -------------------------------- */

html, body, div, span, object,
h1, h2, h3, h4, h5, h6, p, blockquote,
a, em, img, small, strike, strong, sub,
sup, var, b, u, i, center, dl, dt, dd, ol,
ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output,
section, summary {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

a {
    color: inherit;

    &:link, &:visited, &:hover, &:active {
        text-decoration: none;
    }
}

:root {
    font-size: 16px;
    --system-ui: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

    /* ----------------------- Variables ---------------------------- */
    /* Fonts */

    /* Colors */
    --clrBkgrdBlue01: rgb(25 146 212);
    --clrBkgrdBlue02: rgb(46, 167, 238);
    --clrBkgrdBlue03: rgb(46, 153, 212);
    --clrBkgrdGray: rgb(226 232 240);
    --clrBkgrdWhite: rgb(255 255 255);
    --clrFilterWhite: invert(100%) sepia(100%) saturate(2%) hue-rotate(141deg)
        brightness(103%) contrast(101%);
    --clrCardAccent: rgb(240 180 41);
    --clrShadow: rgb(205 210 217);
    --clrDarkShadow: rgb(140, 143, 148);
    --clrSearchBrdr: rgb(150, 157, 167);
    --clrAnnounceBrdr: rgb(210 210 210);
    --clrFontWhite: rgb(255 255 255);
    --clrFontBlack: rgb(0 0 0);
    --clrFontGray: rgb(99 99 99);
    /* Sizes */
    --colMinWidth01: 12rem;
    --gapSidebar01: 2.5rem;
    --gapStd01: 1rem;
    --gapSmall: 0.5rem;
    --gapTiny: 0.2rem;
    --paddingStd01: 1rem;
    --paddingStd02: 2rem;
    --paddingSmall01: 0.5rem;
    --fontLarge01: 2rem;
    --fontLarge02: 1.5rem;
    --fontMedium: 1.2rem;
    --fontSmall01: 1.0rem;
    --fontSmall02: 0.9rem;
}

@font-face {
    font-family: work-sans;
    src: url(fonts/WorkSans[wght].ttf);
}

@font-face {
    font-family: karla;
    src: url(fonts/Karla[wght].ttf);
}

/* ------------------------------ Styles ------------------------------------ */

html {
    height: 100%;
}

body {
    min-height: 100%;
    font-size: var(--fontLarge01);
    font-family: karla;
    /* So that all of the non-link text will be default cursor, not I-beam */
    cursor: default;

    display: grid;
    grid-template: auto auto / 14ch 4fr;
}

img {
    /* consistent alt-text font size */
    font-size: 1rem;
}

.header {
    grid-area: 1 / 2 / 2 / 3;
    position: sticky;
    top: 0;
    padding: 0rem var(--paddingStd02);

    box-shadow: 0px 3px 5px var(--clrShadow);
    background-color: var(--clrBkgrdWhite);
    color: var(--clrFontBlack);
    font-size: var(--fontMedium);

    display: grid;
    grid-template-rows: auto auto;
    gap: var(--gapSmall);

    /* Common styles for both profile pics in header section */
    & div.profile-pic {
        border-radius: 50%;
        background-image: url(../img/scotland-mountains.jpg);
        background-size: 700%;
        background-position: 70% 21%;
        cursor: pointer;

        /* Style for when user hovers over link */
        &:hover {
            border: 2px solid var(--clrSearchBrdr);
        }
    }

    /* Styles for top row of header section */
    & .header-general {
        padding-top: var(--paddingSmall01);
        
        display: grid;
        grid-template-columns: auto minmax(25ch, 75ch) 1fr auto auto;
        gap: var(--gapStd01);
        align-items: center;

        /* Styles for the two icons */
        & img {
            height: 1.3rem;
            cursor: pointer;

            /* bell icon */
            &:nth-of-type(1) {
                justify-self: end;
            }
        }

        & label {
            /* search logo */
            justify-self: end;
        }

        & input#search {
            border-radius: 14px;
            border: none;
            background-color: var(--clrBkgrdGray);
            padding: .2rem 1rem;
            font-size: inherit;
            font-family: inherit;

            &:focus {
                outline: none;
                border: 2px solid var(--clrSearchBrdr);
            }
        }

        & div.profile-pic {
            height: 3rem;
            width: 3rem;
        }

        & .profile-name {
            margin-right: var(--paddingStd02);
            /* padding so that the link region is larger */
            padding: 0.5rem 0rem;
            cursor: pointer;

            /* Style for when user hovers over link */
            &:hover {
                /* Underline instead of bold because bold changes positions of
                other things since rows and cols are 'auto', and position
                determined by distance from right edge */
                text-decoration: underline;
            }
        }
    }

    /* Styles for bottom row of header section */
    & .header-main {
        margin-bottom: var(--paddingStd01);
        
        display: grid;
        grid-template: auto auto / auto 4fr 3fr;
        column-gap: var(--gapStd01);
        align-items: center;
        justify-items: start;

        /* profile picture */
        & div.profile-pic {
            grid-area: 1 / 1 / 3 / 2;
            
            height: 4rem;
            width: 4rem;
        }

        /* greeting */
        & p:first-of-type {
            grid-area: 1 / 2 / 2 / 3;
            align-self: end;

            font-size: var(--fontSmall01);
            font-weight: bold;
        }

        /* username and handle */
        & p:last-of-type {
            grid-area: 2 / 2 / 3 / 3;
            align-self: start;

            font-size: var(--fontLarge02);
            font-weight: bold;
        }

        /* 'new', 'upload', and 'share' */
        & .main-actions {
            grid-area: 1 / 3 / 3 / 4;
            justify-self: end;

            display: flex;
            justify-content: flex-end;
            align-items: center;
            gap: var(--gapStd01);

            & button {
                border-radius: 17px;
                border: none;
                min-width: 9ch;
                background-color: var(--clrBkgrdBlue01);
                color: var(--clrFontWhite);
                padding: 0.5rem 1.2rem;
                font-family: inherit;
                font-size: var(--fontSmall02);
                font-weight: bold;

                &:hover {
                    background-color: var(--clrBkgrdBlue02);
                    cursor: pointer;
                }
            }
        }
    }
}

.sidebar {
    grid-area: 1 / 1 / 3 / 2;
    position: sticky;
    max-height: 100vh;
    top: 0;
    overflow: auto;
    
    background-color: var(--clrBkgrdBlue01);
    color: var(--clrFontWhite);

    display: grid;
    grid-template-rows: auto;
    align-content: start;
    gap: var(--gapSidebar01);

    /* Consistent styles for all of the icons */
    & img {
        /* Margin for all images */
        margin-right: 0.8rem;
    }

    & .branding {
        margin-left: var(--paddingStd01);
        margin-top: var(--paddingStd01);
        
        font-size: var(--fontLarge01);
        font-weight: bold;
        cursor: pointer;

        display: flex;
        
        & img {
            height: var(--fontLarge01);
            filter: var(--clrFilterWhite);
        }
    }

    & .navigation {
        font-size: var(--fontLarge02);
        
        display: grid;
        grid-template-rows: auto;
        align-content: start;
        gap: var(--gapSidebar01);

        & ul {
            display: grid;

            & li {
                padding: 0.5rem 0rem 0.5rem var(--paddingStd01);
                cursor: pointer;
                
                /* This puts the icons and text on the same line */
                display: flex;

                /* Styles for all of the nav icons */
                & img {
                    height: var(--fontLarge02);
                    filter: var(--clrFilterWhite);
                }

                /* Styles for when mouse passes over link */
                &:hover {
                    background-color: var(--clrBkgrdBlue02);
                    font-weight: bold;
                }
            }
        }

    }
}

.main-content {
    grid-area: 2 / 2 / 3 / 3;

    background-color: var(--clrBkgrdGray);
    padding: 1.5rem var(--paddingStd01) 2rem;

    display: grid;
    grid-template: auto 1fr / 3fr 1fr;
    gap: var(--gapStd01);

    /* repeated styles for each section's title */
    & > div > .title {
        margin-bottom: var(--paddingStd01);

        font-size: var(--fontLarge02);
        font-weight: bold;
    }

    /* repeated styles for each section's background */
    & .card,
    & .announcement-info,
    & .trending-profiles {
        box-shadow: 3px 3px 5px var(--clrShadow);
        border-radius: 8px;
        background-color: var(--clrBkgrdWhite);
    }

    & .projects {
        grid-area: 1 / 1 / 3 / 2;

        & .project-cards {
            display: grid;
            grid-template: repeat(3, minmax(12rem, 1fr)) / 
            repeat(auto-fill, minmax(20rem, 1fr));
            grid-auto-rows: minmax(10rem, 1fr);
            gap: 1rem;
            
            & .card {
                border-left: solid 8px var(--clrCardAccent);
                padding: var(--paddingStd01);

                display: flex;
                flex-direction: column;

                /* Style to show user is hovering over a card */
                &:hover {
                    box-shadow: 3px 3px 7px var(--clrDarkShadow);
                }

                & .title {
                    margin-bottom: var(--paddingSmall01);
                    
                    font-size: var(--fontMedium);
                    font-weight: bold;

                    /* Style to show title as a link when user hovers */
                    &:hover {
                        text-decoration: underline;
                    }
                }
    
                & .preview {
                    color: var(--clrFontGray);
                    font-size: var(--fontSmall01);
                }

                /* Style for entire card text content to show it's a link */
                & .title,
                & .preview {
                    cursor: pointer;
                }
    
                & .actions {
                    margin-top: auto;
                    align-self: flex-end;

                    & img {
                        height: var(--fontLarge02);
                        cursor: pointer;

                        /* Style for when user hovers over link */
                        &:hover {
                            box-shadow: 0px 2px var(--clrCardAccent);
                        }
                    }
                }
            }
        }
    }

    & .announcements {
        grid-column: 2 / 3;
        
        display: flex;
        flex-direction: column;

        & .announcement-info {

            background-color: var(--clrBkgrdWhite);
            padding: var(--paddingStd02);

            display: grid;
            grid-template-rows: repeat(3, minmax(5rem, 1fr));
            grid-template-columns: minmax(var(--colMinWidth01), 1fr);
            row-gap: var(--gapSmall);

            & .announcement {
                
                /* Selects all announcements that aren't the last one */
                &:not(:last-child) {
                    border-bottom: 1px solid var(--clrAnnounceBrdr);
                }

                & .title {
                    margin-bottom: var(--paddingSmall01);
    
                    font-size: var(--fontSmall01);
                    font-weight: bold;

                    /* Style to show it's a link when user hovers */
                    &:hover {
                        text-decoration: underline;
                    }
                }
        
                & .preview {
                    color: var(--clrFontGray);
                    font-size: var(--fontSmall02);
                }

                /* styles for entire announcement text content to show link */
                & .title,
                & .preview {
                    cursor: pointer;
                }
            }
        }
    }

    & .trending {
        grid-column: 2 / 3;

        display: flex;
        flex-direction: column;

        & .trending-profiles {
            background-color: var(--clrBkgrdWhite);
            padding: var(--paddingStd02);
            
            display: grid;
            grid-template-rows: repeat(4, auto);
            grid-template-columns: minmax(var(--colMinWidth01), 1fr);
            row-gap: var(--gapStd01);

            & .profile {

                display: grid;
                grid-template: auto auto / auto 1fr;
                align-items: center;
                row-gap: var(--gapTiny);
                column-gap: var(--gapStd01);

                & div.profile-pic {
                    grid-area: 1 / 1 / 3 / 2;
                    
                    height: 3rem;
                    width: 3rem;
                    border-radius: 50%;
                    cursor: pointer;
            
                    /* Style for when user hovers over link */
                    &:hover {
                        border: 2px solid var(--clrSearchBrdr);
                    }

                    &#barry {
                        background-image: url(../img/huangshan-mountains.jpg);
                        background-size: 325%;
                        background-position: 15% 0%;
                    }

                    &#patricia {
                        background-image: url(../img/raven.jpg);
                        background-size: 225%;
                        background-position: 70% 5%;
                    }

                    &#jade {
                        background-image: url(../img/chick.jpg);
                        background-size: 200%;
                        background-position: 57% 0%;
                    }

                    &#dennis {
                        background-image: url(../img/orca.png);
                        background-size: 125%;
                        background-position: 52% 50%;
                    }
                }
    
                & .profile-name {
                    grid-area: 1 / 2 / 2 / 3;
                    align-self: end;
                    
                    font-size: var(--fontSmall01);
                    
                    /* Style to show the user it's a link when they hover */
                    &:hover {
                        text-decoration: underline;
                    }
                }
                
                & .description {
                    grid-area: 2 / 2 / 3 / 3;
                    align-self: start;
                    
                    color: var(--clrFontGray);
                    font-size: var(--fontSmall01);
                }

                /* styles for entire profile text content to show link */
                & .profile-name,
                & .description {
                    cursor: pointer;
                }
            }
        }
    }
}