/* - - - Universal Reset - - - */

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

/* - - - Variables - - - */

:root {

    /* Background Colours */
    --background-header: #e2e2e2;
    --background-body: #f1f1f1;
    --background-sidebar: #dedede;
    --background-main: #f2f2f2;
    --background-footer: #e6e6e6;
    --background-contact-form: #eeeeee;

    /* Fonts */
    --body-font-family: "Merriweather", serif;
    --body-font-weight: 400;
    --body-font-style: normal;

    --header-font-family: "Raleway";
    --header-font-weight: 400;
    --header-font-style: normal;

    --header-links-font-family: "Cardo";
    --text-color-header: black;

    --links-unvisited-font-color: rgb(40, 100, 95);
    --links-visted-font-color: rgb(60, 120, 110);
    --links-hover-font-color: rgb(90, 150, 140);
    --links-active-font-color: rgb(30, 85, 80);
    --links-focus-outline-color: rgb(115, 175, 165);
}

/* - - - Body - - - */

body {
    background: var(--background-body);
    background-repeat: no-repeat;
    background-size: cover;

    font-family: var(--body-font-family);
    font-weight: var(--body-font-weight);
    font-style: var(--body-font-style);
}

.grid-container {
    /* page-wide container; header, main, footer */
    display: grid;
    grid-template-columns: 1fr 1fr 2fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
        "header header header"
        "main main main"
        "footer footer footer";
    gap: 1rem;
}

/* h2 mostly used in the sidebar */
h2 {
    font-family: "Playfair Display";
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
}

/* - - - Header - - - */

#header {
    background: var(--background-header);
    color: var(--text-color-header);
    /* soft the edges just slightly */
    border-radius: 10px;
    /* slight box shadow effect around the header */
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.10);
    grid-area: header;
    /* going to give a fixed px height, because it'll work fine on any device width */
    height: 80px;
    margin-bottom: .5rem;

    font-family: var(--header-font-family);
    font-weight: var(--header-font-weight);
    font-style: var(--header-font-style);
}

/* header divided into three grid columns */
#header-grid {
    display: grid;
    grid-template-columns: 1fr 4fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
        "header-grid-col-one header-grid-col-two header-grid-col-three";
}

/* each grid column is further managed via flex */
#header-grid-col-one,
#header-grid-col-two,
#header-grid-col-three {
    display: flex;
    align-items: center;
}

/* formatting for the different header columns */
#header-grid-col-one {
    grid-area: header-grid-col-one;
    justify-content: start;
    align-items: center;
}

#header-grid-col-two {
    grid-area: header-grid-col-two;
    justify-content: center;
}

#header-grid-col-three {
    grid-area: header-grid-col-three;
    justify-content: end;
}

/* slight shadow effect for the page title text */
#header-title h1 {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

#header-nav {
    display: flex;
    /* make nav cover 100% of its parent container */
    align-items: center;
    width: 100%;
}

#header-navigation-ul {
    display: flex;
    /* make nav ul cover 100% of its parent container */
    width: 100%;
    justify-content: space-evenly;
}

/* specific font family and size for nav links, and also padding; will resize padding in media queries */
#header-navigation-ul li {
    font-family: cardo;
    font-size: 1.25em;
    padding: 1em;
}

/* transform so we can have an effect when we hover over the links */
#header-navigation-ul li a {
    text-decoration: none;
    display: inline-block;
    transition-property: transform;
    transition-duration: 0.3s;
    transition-timing-function: ease;
    font-family: var(--header-links-font-family);
}

/* styling for links in their variours forms; mostly colour, but also adding hover transform */
a:focus {
    outline: 2px dashed var(--links-focus-outline-color);
    /* slight gap between element and outline, so link looks a bit less squished on focus (i.e. active keyboard target) */
    outline-offset: 4px;
}

a:link {
    color: var(--links-unvisited-font-color);
}

a:visited {
    color: var(--links-visted-font-color);
}

a:hover {
    color: var(--links-hover-font-color);
    transform: scale(1.08);
}

a:active {
    color: var(--links-active-font-color);
}


/* Header Logo */

#img-logo {
    padding-left: .75rem;
    height: 80px;
    width: auto;
}

/* - - - Sidebar - - - */

.sidebar {
    background: var(--background-sidebar);
    padding: 1em;
    grid-area: sidebar;
    /* slight softening of the dges */
    border-radius: 10px;
    color: #2a2a2a;
    /* little bit of a shadow around sidebar*/
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.07);
    display: flex;
    flex-direction: column;
    gap: 1em;
    text-align: center;
}

/* this handles the 'about' blurb and profile photo */
#sidebar-container-item-2-and-photo {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
        "sidebar-item-2 sidebar-item-photo";
}

#sidebar-item-2 {
    grid-area: sidebar-item-2;
}

#sidebar-item-photo {
    grid-area: sidebar-item-photo;
}

/* centers the photo horizontally and vertically */
#sidebar-item-photo {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* stop actual img from getting too sizable; also, soften edges/make photo into an oval */
#sidebar-item-photo img {
    max-width: 150px;
    height: auto;
    border-radius: 50%;
}

/* intro blurb */
#sidebar-item-2 p {
    padding: .75rem;
}

#sidebar-item-5 {
    margin-top: .75rem;
}

/* so the titles in the sidebar resize if needed; the sidebar content moves around a fair bit  */
.sidebar-title {
    font-size: clamp(1rem, 1.75vw, 1rem);
}

/* - - - Main - - - */

.main {
    padding: 1em;
    background: var(--background-main);
    grid-area: main;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
}

/* grid container for the sidebar, contacts, and projects sections */
#main-grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 2fr;
    grid-template-rows: auto;
    grid-template-areas:
        "sidebar contact projects";
    gap: 1rem;
}

/* Contact Column */

#contact {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    margin: 1em;
}

/* for the form, slight softening of the edges, a bit of padding, a bit of shadow */
#form-contact-form {
    display: flex;
    flex-direction: column;
    border-radius: 50px;
    padding: 2em;
    background: var(--background-contact-form);
    box-shadow: 0 0 5px rgba(23, 22, 22, 0.2);
}

#form-contact-form h3 {
    padding: 1em;
    text-align: center;
}

/* everything inside contact form cannot be wider than the form container */
#form-contact-form * {
    max-width: 100%;
}

/* targets all the input labels/areas in the form */
#form-contact-form input[type="text"],
#form-contact-form input[type="submit"],
#form-contact-form input[type="tel"],
#form-contact-form input[type="email"],
#form-contact-form textarea {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    padding: 0.5em;
    border: 1px solid #ccc;
}

/* make submit button somewhat small and give it a transform effect */
#form-contact-form input[type="submit"] {
    max-width: 30%;
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}

/* trigger button transform on hover */
#form-contact-form input[type="submit"]:hover {
    /* shift it 1px */
    transform: translateY(1px);
    /* add a little box shadow */
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    /* alter background colour */
    background: linear-gradient(135deg, #fdfdfd, #f1f1f1);
    /* form isn't actually functional, so giving it a cursor icon to make it look clickable */
    cursor: pointer;
}

#contact p {
    /* stop long urls from breaking layout; allow wrap at any character */
    word-break: break-word;
    padding: 1em;
}

/* makes the placeholder text in the input fields a little less loud/jarring */
input::placeholder {
    font-style: italic;
    color: #999;
}

/* Projects Column */

/* four individual project sections */
#projects-title {
    grid-area: projects-title;
}

#project-one {
    grid-area: project-one;
}

#project-two {
    grid-area: project-two;
}

#project-three {
    grid-area: project-three;
}

#project-four {
    grid-area: project-four;
}

/* grid layout for the projects column */
#projects {
    grid-area: projects;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
        "projects-title projects-title"
        "project-one project-two"
        "project-three project-four";
    text-align: center;
    gap: 1rem;
}

/* add a trasform effect to the links in the projects section*/
#projects a {
    text-decoration: none;
    display: inline-block;
    transition-property: transform;
    transition-duration: 0.3s;
    transition-timing-function: ease;
}

#projects h3 {
    /* getting side-scrolling without this */
    word-break: break-word;
}

#projects p {
    word-break: break-word;
    padding: 1em;
}

/* for each card, have a bit of shadow, soften the border edges, and add transform and box shadow effects upon transition */
.project-card {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    padding: 1.5em;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin: .25rem;
    margin-top: 1.5rem;
    /* tells browswer ahead of time that these elements will change; was getting lagging, added this to try to help; going to leave it */
    will-change: transform;
}

/* effect for when we hover over the project cards */
.project-card:hover {
    /* shift -5 px, add a box shadow, slightly change the background */
    transform: translateY(-5px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    background: linear-gradient(135deg, #fdfdfd, #f1f1f1);
}

/* - - - Footer - - - */

.footer {
    margin-top: .5rem;
    display: flex;
    background: var(--background-footer);
    grid-area: footer;
    border-radius: 10px;
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.06);
    /* giving footer a fix px height, because this will work fine with our design at any page width */
    height: 70px;
    /* center content horizonally and vertically */
    justify-content: center;
    align-items: center;
}

/* - - - Media Queries - - - */

/* put each of the grids in one column at max 700px*/
@media (max-width: 700px) {
    #main-grid-container {
        grid-template-columns: 1fr;
        grid-template-areas:
            "sidebar"
            "contact"
            "projects";
    }

    #projects {
        grid-template-columns: 1fr;
        grid-template-areas:
            "projects-title"
            "project-one"
            "project-two"
            "project-three"
            "project-four";
    }

    /* make sure title text is somewhatr smaller, and edit padding for nav links so everything fits a bit better*/
    #header-title h1 {
        font-size: 1.5rem;
    }

    #header-navigation-ul li {
        padding: .4em;
        padding-left: 0;
    }
}

/* moving most grids into two columns from 701px on*/
@media (min-width: 701px) and (max-width: 1200px) {
    #main-grid-container {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "sidebar contact"
            "projects projects";
    }

    #projects {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "projects-title"
            "project-one project-two"
            "project-three project-four";
    }

    /* put profile photo above 'about me' text */
    #sidebar-container-item-2-and-photo {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas:
            "sidebar-item-photo"
            "sidebar-item-2";
    }
}

/* similar to above, but slightly ammend column sizes for main grid container */
@media (min-width: 1201px) and (max-width: 1400px) {
    #main-grid-container {
        grid-template-columns: 1.5fr 1.5fr;
        grid-template-areas:
            "sidebar contact"
            "projects projects";
    }

    /* keep project cards in two columns */
    #projects {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "projects-title"
            "project-one project-two"
            "project-three project-four";
    }

}

@media (min-width: 1401px) and (max-width: 1600px) {

    /* put photo above 'about me' paragraph */
    #sidebar-container-item-2-and-photo {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas:
            "sidebar-item-photo"
            "sidebar-item-2";
    }
}