/* - - - Universal - - - */

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

img {
    max-width: 100%;
    height: auto;
}

h1 {
    padding: 0;
    margin: 0;
}

ul {
    list-style: none;
}

/* - - - Variables - - - */

:root {

    /* Colours */

    --body-background-color: white;

    --header-background-color: #343a40;
    --header-font-color: #ffffff;

    --main-thumbnail-background-color: #f8f9fa;

    --card-background-color: #ffffff;
    --card-text-color: #ffffff;

    --footer-background-color: #ffffff;
    --footer-font-color: #ffffff;

    --main-call-to-action-background-color: #007bff;
    --secondary-call-to-action-background-color: #6c757d;
    --call-to-action-text-color: white;

    /* Text */

    /* code for body font-family pulled from chrome dev tools */
    --body-text-family: BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    /* end of code pulled from dev tools */
}

/* - - - Body - - - */

body {
    background: var(--body-background-color);
    font-family: var(--body-text-family);
    font-weight: 400;
    line-height: 1.5;
}

/* grid for the entire page: header, main, footer,  */
#body_container_grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
        "header-index"
        "main_container_grid"
        "footer-index";
}

/* - - - Header - - - */

/* stacking visible and hidden header content
using clamp for overall page responsiveness; not perfect, will see if I can make it better later */
#header-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
        "header-hidden"
        "header-visible";
    padding-left: clamp(2rem, 20vw, 30em);
    padding-right: clamp(2rem, 20vw, 30em);
}

#header-index {
    grid-area: header-index;
    background: var(--header-background-color);
    color: var(--header-font-color);
}

/* make links look like they're clickable even though they don't go anywhere 
slight transition using transform and opacity, and also using cursor to create a visible mouse pointer */
#header-hidden-col-two li {
    color: white;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.1s ease, opacity 0.2s ease;
}

/* transition when fake links are clicked */
#header-hidden-col-two li:active {
    transform: scale(0.96);
    opacity: 0.6;
}

#header-visible {
    grid-area: header-visible;
    display: flex;
    justify-content: space-between;
}

#visible-one {
    display: flex;
}

#header-hidden {
    grid-area: header-hidden;
}

#visible-one img {
    max-height: 2em;
}

#header-hidden-col-one {
    grid-area: header-hidden-col-one;
    max-width: 85%;
}

#header-hidden-col-one p {
    color: grey;
}

#header-hidden-col-two {
    grid-area: header-hidden-col-two;
}

#visible-one {
    gap: .5em;
}

/* there is surely a better way to configure this camera svg; for now,
making it roughly the same height and width as in the bootstrap example */
#visible-one svg {
    height: 2.25em;
    width: 1.5em;
}

/* grid within header just for the initially hidden content; put one column on the left, and one one the right */
#header-hidden-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
        "header-hidden-col-one header-hidden-col-two";
    gap: 2rem;
    padding: 1em;
    margin-bottom: 2em;
}

/* to hide content initally
max height means it's still part of the page, but not visible
opacity also makes it invisible
hidden overflower in case anything spills out
relatively smooth transition; still a bit jerky, could be smoother */
#header-hidden-content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.5s ease, opacity 0.5s ease;
}

/* once header-toggled is checked, we make the following edits to our hidden content in the header 
give it a height of the available space/row; make it visible again with opacity 1*/
#header-toggle:checked~#header-hidden-content {
    max-height: 100%;
    opacity: 1;
}

/* Hamburger Icon */

/* very basic attempt at hamburge icon usings span (just tried to learn this today) 
inline-block lets the hamburger label be styled like a box; allows for setting of height, width, etc
cursor to make it look like we have a pointer
border, colour and sizing edits to make it look somewhat like the bootstrap one
*/
#hamburger-icon {
    display: inline-block;
    width: 45px;
    cursor: pointer;
    border: 1px solid grey;
    border-radius: 10px;
}

/* editing each of the spans; colour and size values to make them look kind of like the hamburger icon */
#hamburger-icon span {
    display: block;
    background-color: #343a40;
    margin: 7px;
    width: 30px;
    border: 1px solid grey;
}

/* - - - Main - - - */

/* grid for the entire main container; two boxes stacked on top of each other, one for About section, one for all the thumbnails */
#main_container_grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
        "main-box-one"
        "main-box-two";
}

#main_container_grid {
    grid-area: main_container_grid;
}

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

#box-one-two {
    grid-area: box-one-two;
}

/* Main Box One */

#main-box-one {
    padding: 2em;
    /* move text to center */
    text-align: center;
    max-width: 40%;
    display: flex;
    flex-direction: column;
    /* centers box one content horizonally */
    margin: 0 auto;
    /* slight margin between the two main boxes */
    margin-bottom: 3rem;
}

#box-one-one h1 {
    background: var(--body-background-color);
    font-family: var(--body-text-family);
    font-weight: 400;
    line-height: 1.5;
}

#box-one-two {
    display: flex;
    justify-content: center;
    gap: 1em;
}

#box-one-text {
    font-size: 1.25rem;
}

/* Call to Action buttons */

#main-call-to-action {
    background: var(--main-call-to-action-background-color);
}

#secondary-call-to-action {
    background: var(--secondary-call-to-action-background-color);
}

/* makes them look like they're being clicked, but giving them a box shadow  transition */
#main-call-to-action,
#secondary-call-to-action {
    color: var(--call-to-action-text-color);
    padding: 0.5em;
    border-radius: 7%;
    margin-top: 1rem;
    /* cursor so we have a pointer */
    cursor: pointer;
    /* ease to determine how transition speeds up/slows down, opacity to animate the fade in/out effect, box shadow for */
    transition: transform 0.1s ease, opacity 0.2s ease, box-shadow 0.3s ease;
    /* slight box shadow as a base */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

/* */
#main-call-to-action:hover,
#secondary-call-to-action:hover {
    /* slightly change box shadow when we hover over it */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

/* when we click on the fake buttons, scale them up, edit the opacity, and change the box shadow slightly */
#main-call-to-action:active,
#secondary-call-to-action:active {
    transform: scale(0.96);
    opacity: 0.6;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Main Box Two */

/* grid for all the thumbnails */
#main-box-two-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr auto auto;
    grid-template-areas:
        "thumbnail_one thumbnail_two thumbnail_three"
        "thumbnail_four thumbnail_five thumbnail_six"
        "thumbnail_seven thumbnail_eight thumbnail_nine";
    gap: 2em;
    background: var(--main-thumbnail-background-color);
    padding-top: 4em;
    padding-bottom: 4rem;
    /* using clamp to make the left and right padding responsive */
    padding-left: clamp(2rem, 20vw, 30em);
    padding-right: clamp(2rem, 20vw, 30em);
}

/* various thumbnail values: colour, spacing, margin, padding, flex values, etc, to try to make it look similar to bootstrap layout */
.thumbnail-background {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    background-color: white;
}

.thumbnail-paragraph {
    text-align: center;
    background: white;
    padding: 1.5em;
    margin-bottom: 2em;
}

.thumbnail-lower-ribbon {
    display: flex;
    justify-content: space-between;
}

.thumbnail-lower-ribbon-one {
    display: flex;
}

.thumbnail-lower-ribbon-one p {
    padding: .3em;
    border: 1px solid grey;
    border-radius: 10%;
}

/* - - - Footer - - - */

/* spacing for footer, and also text colour*/
#footer-index {
    grid-area: footer-index;
    display: flex;
    margin-top: 3rem;
    margin-bottom: 3rem;
    color: grey;
}

/* text colour and decoration for footer links */
#footer-index a {
    color: rgb(9, 181, 244);
    text-decoration: none;
}

/* clamp to make footer padding responsive */
#footer-box-one,
#footer-box-two {
    padding-left: clamp(2rem, 20vw, 30em);
    padding-right: clamp(2rem, 20vw, 30em);
}

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

/* edit to clamp values at max 1300px, for better overall formating */
@media (max-width: 1300px) {
    #main-box-two-grid,
    #header-grid,
    #footer-box-one,
    #footer-box-two {
        padding-left: clamp(2rem, 5vw, 5em);
        padding-right: clamp(2rem, 5vw, 5em);
    }
}

@media (max-width: 800px) {

    /* at max 800px, stack all the thumbnails vertically */
    #main-box-two-grid {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(9, 1fr);
        grid-template-areas:
            "thumbnail_one"
            "thumbnail_two"
            "thumbnail_three"
            "thumbnail_four"
            "thumbnail_five"
            "thumbnail_six"
            "thumbnail_seven"
            "thumbnail_eight"
            "thumbnail_nine";
        gap: 2em;
    }

    /* edit to clamp values at max 800px, for better overall formating */
    #main-box-two-grid,
    #header-grid,
    #footer-box-one,
    #footer-box-two {
        padding-left: clamp(2rem, 10vw, 10em);
        padding-right: clamp(2rem, 10vw, 10em);
    }
}