/* Reset CSS */
/* Universal selector (*) targets every element (regardless tag, class, ID) */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    /* outline: 1px dashed #ccc; */
}

:root {
    --white: #fff;
    --main-link-color: #484848;
    --secondary-link-color: #5a98e2;
    --bg-color: #d8d8d8;
    --dark-text: #4a4a4a;
    --light-text: #949494;
}

html {
    font-size: 16px;
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background-color:var(--white);
}

a {
    text-decoration: none;
    color: inherit;
}

.container { /* grid system to split our document into 2 col, 6 rows */
    display: grid;
    grid-template-columns: [full-start] 0.6fr [center-end center-start] 0.4fr [full-end];
    grid-template-rows: repeat(6, min-content);
}

/** Start of Desktop Section **/
/** ************************ **/

/* Set up the navbar for the desktop */
nav {
    display: flex; /* This property grid-column is managed by: .container */
    grid-column: full-start / full-end; /* What is display: flex managing? It is managing itself */
    justify-content: space-between; /* justify-content is used along-side display:flex */
    height: 4rem;
}

nav ul {
    display: flex;
    list-style: none;
}

nav ul li {
    align-content: center;
    padding-right: 1rem;
}

nav ul li:last-child {
    padding-right: 1.5rem;
}

nav ul li a {
    font-size: 0.75rem;
}

nav > a {
    display: flex;           /* targets the logo's hyperlink */
    align-items: center;
}

/* Set up logo styles */
.logo {
    height: 3rem;
    margin-left: 1.5rem;    
}

nav a span {
    text-transform: uppercase;
    line-height: 2rem;

}

nav a span:first-of-type {
    font-weight: bold;
    color: var(--main-link-color);
}

nav a span:last-of-type {
    font-weight: lighter;
    color: #aaa;
}

/* Set up navigation links' styles */
/* create hover effects */
nav ul li:hover{
    text-decoration: underline solid 2px #7b7b7b;
}

/* Set up header area */
header {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-color);
}

.imgcontainer {
   padding: 2rem 1.5rem;
}

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

header > div {
    display: flex;
    flex-direction: column;
    height: 18rem;
    justify-content: space-evenly;
    padding-right: 2rem;
}

header > div > h1 {
    font-size: xx-large;
    color: var(--dark-text);
}

header > div > h2 {
    font-size: large;
    color: var(--dark-text);
}

header > div > a {
    display: block;
    background-color: var(--main-link-color);
    color: var(--white);
    padding: 0.5rem 0;
    text-align: center;
}

/* hover effect for call to action link */
/* hover effect for the CTA button */
header > div > a:hover {
    background-color: white;
    color: black;
}

/* Set up practice section */
.practice {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.practice > .imgcontainer > img {
    max-width: 100%;
    height: auto;
}

.practice > .practice-text {
    padding: 0 1.5rem;
    color: var(--dark-text);
}

.practice > .practice-text > h1 {
    font-size: xx-large;
    padding-bottom: 1.5rem;
}

.practice > .practice-text > p {
    font-size: small;
    font-weight: lighter;    
}

.practice > .practice-text > p > span {
    display: block;
    margin: 2rem 0; 
}

/* Set up events section */
.events {
    display: grid;
    grid-template-rows: repeat(3, min-content);
    border-left: 1px solid #e7e7e7;
}

.events .events-block {
    display: grid;
    grid-template-columns: 0.35fr 0.65fr;
    align-items: center;
    border-bottom: 1px solid #e7e7e7;
    padding: 1rem;
}

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

.events .events-text {
    margin-left: 1rem;
    height: 100%;
    align-content: center;
    color: var(--dark-text);
}

.events .events-text h3 {
    font-size: large;   
}

.events .events-text p {
    display: block;
    font-size: small;
    font-weight: lighter;
    padding: 0.5rem 0;
}

.events .events-text a {
    display: block;
    font-size: small;
    color: var(--secondary-link-color);  
    padding-top: 0.5rem; 
}

.events .events-block:last-child {
    background-color: var(--bg-color);
}

/* Set up start learning section */
.learn {
    background-color: var(--bg-color);
    height: auto;
    grid-column: full-start / full-end;
}

.learn-header {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dark-text);
    /* bottom 1rem since grid will also have */
    padding: 2rem 0 1rem 0 ; /* tp, rt, btm, lf */
}

.learn-grid {
    display: grid;
    width: auto;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 2rem;
    /* top 1rem so that total will be 2rem=32px */
    margin: 1rem 4.5rem 2rem; /* tp, lf rt, btm */
}

.learn-card {
    background-color: var(--white);
}

.learn-card a {
    text-decoration: none;
}

.learn-card img {
    width: 100%;
    height: auto;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

.learn-card h3 {
    padding: 1rem 0 0.5rem 1rem; /* tp, rt, btm, lf */
    font-size: x-large;
    color: var(--dark-text);
    font-weight: normal;
}

.learn-details {
    margin: 1rem 1rem; /* tp btm, lf rt */
    width: 80%;
}

.learn-details p:first-of-type {
    padding: 0.5rem 0; /* tp btm, lf rt */
    text-transform: uppercase;
    color: var(--light-text);
    font-weight: lighter;
}

.learn-details p:last-of-type {
    padding: 0 0 1.5rem 0; /* tp, rt, btm, lf */
    font-size: medium;
    font-weight: lighter;
    color: var(--light-text);
}

/* Set up thesis header */
.thesis-header {
    background-color: var(--white);
    color: var(--dark-text);
    height: auto;
    grid-column: full-start / full-end;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 0;  /* tp btm, lf rt */
}

/* Set up thesis left side */
.thesis-left {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0 1.5rem; /* tp btm, lf rt */
}

.thesis-left a {
    text-decoration: none;
}

.vid-container > video {
    max-width: 100%;
    height: auto;
}

.vid-details h3 {
    font-weight: bold;
    padding: 1.5rem 0 0.25rem 0; /* tp, rt, btm, lf */
    color: var(--dark-text);
}

.vid-details p {
    padding: 0.25rem 0 2rem 0; /* tp, rt, btm, lf */
    font-weight: lighter;
    color: var(--light-text);
}

/* Set up thesis right side */
.thesis-right {
    display: grid;
    grid-template-rows: repeat(2, min-content);
    border-left: 1px solid var(--white);
}

.right-block {
    border-bottom: 1px solid var(--white);
}

.right-block a {
    display: grid;
    grid-template-columns: 0.35fr 0.65fr;
    align-items: center;
    text-decoration: none;
    padding: 1rem;
}

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

.right-details {
    margin: 1rem;
    height: 100%;
    align-content: center;
}

.right-details h3 {
    font-size: large;
    color: var(--dark-text);
}

.right-details p {
    display: block;
    font-size: small;
    font-weight: lighter;
    padding: 0.5rem 0; /* tp btm, lf rt */
    color: var(--light-text);
}

.right-block:first-of-type {
    background-color: var(--bg-color);
}

/* Set up footer section */
footer {
    grid-column: full-start / full-end;
    display: flex;
    justify-content: space-between;
    padding: 1rem 1.5rem 2rem; /* tp, lf rt, btm */
    border: 1px solid #e7e7e7;
    font-size: small;
    color: #7b7b7b;
}

/* set unordered list's links */
footer ul {
    display: flex;
    list-style: none;
}

footer ul li {
    margin-right: 0.5rem;
}

/* set the hover effect for terms and privacy */
footer ul li:hover{
    text-decoration: underline solid 2px #7b7b7b;
}

/* Hide nav mobile */
#nav-mobile {
    display: none;
}

/* Hide events mobile */
.events > .events-block > .events-img-mobile {
    display: none;
}

/** ********************** **/
/** End of Desktop Section **/

/** Start of Mobile Section **/
/** *********************** **/

/* if the width of screen is 640px and below (aka 40rem x 16px) */
@media screen and (max-width: 40rem ) {
    /* hide desktop items from mobile */
    nav, 
    .practice, 
    .events > .events-block > .events-img-desktop,
    .learn-card img, .learn-details,
    .vid-details, .thesis-right,
    footer ul {
        display: none;
    }

    /* fix nav */
    #nav-mobile {
        grid-column: full-start / full-end;
        display: flex;
        height: 4rem;
        justify-content: space-around;
        align-items: center;
        
    }

    /* fix header area (hero section) */
    header {
        display: grid;
        grid-column: full-start / full-end;
    }

    .imgcontainer {
        padding: 0;
    }

    header > div {
        display: block;
        width: auto;
        height: auto;
        padding: 2rem 1rem;
    }

    header > div > h1 {
        padding-bottom: 2rem;
    }

    header > div > h2 {
        padding-bottom: 1.5rem;
    }

    /* fix events area */
    .events {
        display: grid;
        grid-column: full-start / full-end;
    }

    .events > .events-block {
        display: flex;
        flex-direction: column;
        border: none;
    }

    .events > .events-block:nth-child(2), .events > .events-block:last-child {
        padding-top: 3rem;
    }    

    .events > .events-block:last-child {
        background-color: var(--white);
    }

    .events > .events-block > .events-text {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .events > .events-block > .events-text > h3 {
        padding-top: 1.5rem;
    } 

    /* so that the media img will apprear when mobile, since in desktop mode it's hidden */
    .events > .events-block > .events-img-mobile {
        display: block; 
    }    

    /* fix learn area */
    .learn {
        display: grid;
        grid-column: full-start / full-end;
        background-color: var(--white);
        border-top: 1px solid var(--bg-color);
    }

    .learn-header {
        justify-items: center;
        align-items: center;
    }

    .learn-grid {
        display: flex;
        flex-direction: column;
        gap: 0.5rem 0;
    }

    .learn-card h3 {
        background-color: var(--bg-color);
        align-items: center;
        padding: 1rem 0 1.5rem 1rem ; /* tp, rt, btm, lf */
    }

    /* fix thesis */
    .thesis-header {
        border-top: 1px solid var(--bg-color);
    }

    .thesis-left {
        margin: 0 0 1.5rem 0; /* tp, rt, btm, lf */
        grid-column: full-start / full-end;
        height: auto;
    }

    /* fix footer */
    footer {
        font-size: small;
        padding-top: 1.5rem;
    }

    footer p {
        padding: 1rem 0;
    }
}

/* *********************** */
/** End of Mobile Section **/