:root {
    /* colors */
    --cream: #F1DED4;
    --red: #E92527;
    --orange: #F04F25;
    --light-orange: #F4A375;
    --light-brown: #C8894A;
    --mid-brown: #A0622A;
    --dark-brown: #6B3A1F;
    --ink: #1A0A00;
    --scoreboard-background: #0C0500;
    /* With changing my nav to a scoreboard, I needed non active buttons to be darker */
    /* I was originally trying to do the HEX code followed by a percentage, the built in agent switched it to rgba for me */
    /* This shows the color, and the opacity */
    --nav-light: rgba(240, 79, 37, 0.25);

    /* I wanted to add glow shadows to make it feel like a scoreboard */
    /* I found text shadow on MDN */
    /* The way I wrote it is color, x offset, y offset, blur radius */
    --glow-orange: var(--orange) 0 0 0.5rem;
    --glow-cream: var(--cream) 0 0 0.5rem;
    /* I might get rid of this since I changed my theme, idk yet */


    /* fonts */
    --body-font: "vandertak-regular", sans-serif;
    --heading-font: "dirty-bakers-dozen", sans-serif;
    --scoreboard-font: monospace;


    /* type scale */
    --body-copy: 1rem;
    --small-heading-copy: calc(var(--body-copy) * 1.25);
    --label-copy: calc(var(--body-copy) * 1.75);
    --heading-copy: calc(var(--body-copy) * 4);


    /* layout */
    --spacing-small: 1rem;
    --spacing-xs: calc(var(--spacing-small) * 0.5);
    --spacing-medium: calc(var(--spacing-small) * 2);
    --spacing-large: calc(var(--spacing-small) * 4);
    --court-lines: 0.2rem;
    --max-width: 90rem;
}


body {
    background-color: var(--scoreboard-background);

    p {
        font-family: var(--body-font);
        color: var(--ink);
        font-size: var(--body-copy);
    }
}



/****************  NAVIGATION BAR  ****************/
nav{
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--ink);
    padding-block: var(--spacing-small);
    padding-inline: calc(var(--spacing-small) * 2);
    border-block-end: solid var(--orange) var(--court-lines);
}


nav ul {
    display: flex;
    /* justify-content: center; */
    /* removing this justify content let me see my first button */
    gap: var(--spacing-small);
    /* from week 9 class site for overflow, since I didn't want to fit everything onto the screen, this allows for the scroll to happen on mobile */
    overflow-y: auto;
}

.button {
    font-family: var(--scoreboard-font);
    font-size: var(--small-heading-copy);
    color: var(--nav-light);
    padding-block: var(--spacing-xs);
    padding-inline: var(--spacing-small);
    /* border: var(--orange) solid transparent; */

    &:hover {
        color: var(--orange);
        /* text-shadow: var(--glow-orange); */
        /* i no longer need this */
    }

    &.active {
        color: var(--orange);
        /* text-shadow: var(--glow-orange); */
        /* border-color: var(--orange); */
    }
}

@media (width > 640px) {
    nav ul {
        justify-content: center;
        gap: var(--spacing-medium);
    }

    .button {
        font-size: calc(0.75 * var(--label-copy));
    }
}




/****************** HEADER ********************/
header {
    padding-block: var(--spacing-large);
    padding-inline: var(--spacing-medium);
    max-width: var(--max-width);
    margin-inline: auto;
    border-block-end: solid var(--mid-brown) var(--court-lines);
    /* centers my header */

    .arena-link{
        margin-block-start: var(--spacing-small);
        a {
            color: var(--light-brown);
            font-size: calc(0.85 * var(--body-copy));
            font-family: var(--scoreboard-font);
            text-decoration: underline;
            text-underline-offset: 0.5rem;
            
            &:hover {
                color: var(--orange);
                /* text-shadow: var(--glow-orange); */
            }
        }
    }
    
    #channel-description {
        padding: 0;
        margin: 0;

        p {
            color: var(--light-brown);
            font-family: var(--body-font);
            font-size: calc(1.2 * var(--body-copy));
            line-height: 1.5rem;
        }
    } 


    .header-stats {
        border: solid var(--mid-brown) var(--court-lines);
        background-color: var(--ink);
        max-width: calc(0.3 * var(--max-width));

        .stats {
            padding-block: var(--spacing-xs);
            padding-inline: var(--spacing-small);
            display: flex;
            flex-direction: column;
            gap: var(--spacing-xs);
            border-block-end: solid var(--mid-brown) var(--court-lines);
            &:last-child {
                /* come back to this */
                /* i can't figure out why there is this extra space under "About" section */
                 border-block-end: 0;
            }

            .heading-label {
                font-family: var(--scoreboard-font);
                font-size: calc(0.7 * var(--body-copy));
                color: var(--orange);
                letter-spacing: 0.25rem;
                font-weight: 700;
            }

            #channel-count, p {
                color: var(--light-brown);
                font-size: calc(1.2 * var(--body-copy));
            }
        }
    }
}

.year {
    font-family: var(--scoreboard-font);
    color: var(--mid-brown);
    /* display: block; */
    font-size: calc(0.70 * var(--body-copy));
    letter-spacing: 0.25rem;
}



/* I had to move this outside of the header tag, but I don't understand why. I assumed this display:flex would work on the heading section. */
/* Oh wait. I think it is because title and header-stats are two sections inside the heading.section, okay that makes sense. Don't mind this, this is for me to remember */
.heading-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-medium);

    @media (width > 768px) {
        flex-direction: row;
    }
}



h4 {
    font-family: var(--scoreboard-font);
    font-size: var(--body-copy);
    color: var(--cream);
    text-shadow: var(--glow-cream);
    letter-spacing: 0.70rem;
    padding: var(--spacing-xs);
    /* display: inline-block; */
}


h1 {
    font-family: var(--heading-font);
    font-size: var(--heading-copy);
    color: var(--orange);
    line-height: 1;
    /* I wanted to add background shadows to make it feel like a basketball */
    /* I found text shadow on MDN */
    /* The way I wrote it is color, x offset, y offset, blur radius */
    text-shadow: var(--dark-brown) 0.1rem 0.1rem 0, var(--red) 0.2rem 0.2rem;
}

@media (width < 768px) {
    h1 {
        font-size: calc(0.7 * var(--heading-copy));
    }
}







main {
    padding-block: var(--spacing-small); 

    .cards {
        overflow: hidden;
        padding-inline: var(--spacing-large);
    }

    @media (width < 768px) {
        .cards {
            padding-inline: var(--spacing-medium);
        }
    }
}


#channel-blocks {
    counter-reset: card-number;
    /* this initializes the custom counter */
    /* I am starting it at #1, so I won't specify a value  */
    /* this is from a youtube video, because I wasn't entirely sure how exactly counters work */
    display: flex;
    flex-direction: row;
    gap: var(--spacing-medium);
    overflow-x: auto;
    padding-block: var(--spacing-medium);
    padding-inline: var(--spacing-small);
    scrollbar-color: var(--mid-brown) transparent;
    scrollbar-width: thin;
    cursor: pointer;
    /* I love this cursor thing */

    /* everything below is from Loom */
    &.show-images {
        li {
            display: none;
        }
        li.image-block {
            display: block;
        }
    }

    &.show-links {
        li {
            display: none;
        }
        li.link-block {
            display: block;
        }
    }

    &.show-videos {
        li {
            display: none;
        }
        li.linked-video-block, li.rich-block {
            display: block;
        }
    }

    &.show-text {
        li {
            display: none;
        }
        li.text-block {
            display: block;
        }
    }
}

@media (width > 768px) {
    #channel-blocks {
        display: grid;
        grid-template-rows: repeat(2, 27rem);
        grid-auto-flow: column;
    }
}

#channel-blocks li {
    /* min-width helps me stop the card from becoming too small */
    /* without it, my cards look extremely thin and weird */
    min-width: calc(16 * var(--spacing-small));
    height: calc(27 * var(--spacing-small));
    padding: 0rem 0rem calc(2.5 *var(--spacing-small)) 0rem;
    background-color: var(--cream);
    border-radius: 0.3rem;
    overflow: hidden;
    position: relative;
    border-block-start: solid var(--orange) calc(3 * var(--court-lines));
    display: flex;
    flex-direction: column;
    /* I wanted to add a shadow behind the cards */
    /* I found this on MDN */
    /* It lets me add a box shadow behind my cards, so I added two of them */
    box-shadow: 0.3rem 0.3rem 0 var(--dark-brown), 0.5rem 0.5rem 0 var(--mid-brown);
    filter: sepia(0.2) contrast(1);
    /* from MDN */
    /* I wanted the cards to have a vintage look, so I added a sepia filter */
    transition: box-shadow 0.3s ease;
    &:hover {
        box-shadow: 0.3rem 0.8rem 0 var(--dark-brown), 0.5rem 1.1rem 0 var(--mid-brown);

        figure, iframe, video {
            transform: scale(0.90);
        }

        picture, img {
            transform: scale(0.90);
        }
    }

    /* I needed to have this stuff gone */
    p, h4, figcaption {
        display: none;
    }

    figure, iframe, video {
        width: 100%;
        height: calc(24 * var(--spacing-small));
        flex-shrink: 0;
        /* I needed the thumbnails to not shrink to the card info below it, or smaller than its set height */
        /* I need the thumbnail the same size */
        /* Found on MDN */
        /* Without it, the thumbnails would shrink, and cannot get longer*/
        overflow: hidden;
        transition: transform 0.3s ease-in-out;
    }

    picture, img {
        width: 100%;
        height: 100%;
        /* display: block; */
        object-fit: cover;
        transition: transform 0.3s ease-in-out;
    }
   

    &::after {
        content: counter(card-number, upper-roman);
        /* this displays the current counter value, using the content property of the before psudo-element of each list item*/
        /* this is from a youtube video, because I wasn't entirely sure how exactly counters work */
        counter-increment: card-number;
        position: absolute;
        /* tells when the counter should increase and decrease, and by how much */
        /* I won't specify a value */
        /* this is from a youtube video, because I wasn't entirely sure how exactly counters work */
        /* https://www.youtube.com/watch?v=hDg7yuHXBm4 */
        font-family: var(--scoreboard-font);
        font-size: calc(0.75 * var(--body-copy));
        font-weight: 700;
        color: var(--light-brown);
        /* places to the bottom of the card for me */
        /* places to the right of the card for me */
        /* MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/inset-block-end */
        inset-block-end: calc(1.25 * var(--spacing-xs));
        inset-inline-end: var(--spacing-small);
    }
    /* I wasn't sure why I couldn't get the before pseudo-element to work for two items */
    /* I learned that the before and after can only target the first child of the element */
    &::before {
        content:'1998 SERIES';
        position: absolute;
        font-family: var(--scoreboard-font);
        font-size: calc(0.75 * var(--body-copy));
        font-weight: 700;
        color: var(--light-brown);
        inset-block-end: calc(1.25 * var(--spacing-xs));
        inset-inline-start: var(--spacing-small);
    }
}

@media (width < 768px) {
    #channel-blocks li {
        figure, iframe, video {
            transition: transform 0.3s ease-in-out;
        }
        picture, img {
            transition: transform 0.3s ease-in-out;
        }

        &:hover {
            figure, iframe, video {
                transform: none;
            }
            picture, img {
                transform: none;
            }
        }
    }
}

.text-card-title {
    font-family: var(--scoreboard-font);
    font-size: var(--label-copy);
    color: var(--red);
    padding: var(--spacing-small) var(--spacing-small);
    text-transform: uppercase;
}


#card-modal {
    background-color: var(--cream);
    border: solid var(--orange) var(--court-lines);
    border-radius: 0.3rem;
    padding: var(--spacing-small);
    max-width: calc(20 * var(--spacing-small));
    box-shadow: 0.3rem 0.3rem 0 var(--dark-brown), 0.5rem 0.5rem 0 var(--mid-brown);
    filter: sepia(0.2) contrast(1);
    /* this helps the modal stay centered as I scroll */
    /* removing this makes it not visible when scrolled down */
    position: fixed;
    /* MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/inset */
    /* I need to use both margin:auto with inset:0 */
    /* this helps me to center it in the screen! */
    margin: auto;
    inset: 0;
    max-height: 60%;
    overflow-y: auto;
    &::backdrop {
        background-color: rgba(12, 5, 0, 0.65);
    }
}

#close-modal {
    font-family: var(--scoreboard-font);
    font-size: calc(2 * var(--body-copy));
    color: var(--light-brown);
    /* padding: var(--spacing-medium); */
    margin-inline-start: auto;
    margin-block-start: calc(var(--spacing-xs) * -1);
    display: block;
    cursor: pointer;
    position: sticky;
    padding: 0;
    inset-block-start: var(--spacing-xs);
    inset-block-start: 0;
    padding-block-start: var(--spacing-xs);
    /* I was having trouble getting the modal close button to hide the text behind it */
    /* Claude said to remove inset-block-start and make it 0 */
    /* this was leaving a gap where the text can show */
    padding-block-end: var(--spacing-small);
    background-color: var(--cream);
    width: 100%;
    &:hover {
        color: var(--orange);
        font-weight: 700;
    }
}


#modal-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-small);
    padding-block-end: calc(2 * var(--spacing-small));

    /* .card-content {
        font-family: var(--body-font);
        font-size: var(--body-copy);
    } */

     .card-title {
        font-family: var(--scoreboard-font);
        font-size: calc(0.85 * var(--body-copy));
        color: var(--orange);
        letter-spacing: 0.02rem;
        font-weight: 700;
        text-transform: uppercase;
        /* some of my titles had 0 height */
        /* min-height: fit-content; */
        padding: 0;
        padding-block-start: var(--spacing-small);
        overflow: hidden;
    }

    /* I needed help getting the paragraphs to add space and didn't know how to target it */
    /* Claude said to target the p + p selector */
    /* this allows space after any paragraph (adjacent sibling selector) */
    .card-description p + p{
            margin-block-start: var(--spacing-small);
        }
    .card-description p{
        font-family: var(--body-font);
        font-size: var(--body-copy);
        color: var(--dark-brown);
        line-height: 1.5;
    }

    .card-link a {
        font-family: var(--scoreboard-font);
        font-size: calc(0.85 * var(--body-copy));
        color: var(--dark-brown);
        text-decoration: underline;
        text-underline-offset: 0.3rem;

        &:hover {
            color: var(--orange);
            font-weight: 700;
        }
    }
}




/**************** footer *****************/
footer {
    margin-top: var(--spacing-large);
    padding-block: var(--spacing-large);
    padding-inline: var(--spacing-medium);
    max-width: var(--max-width);
    margin-inline: auto;
    /* centers my footer */
    border-block-start: solid var(--mid-brown) var(--court-lines);
    gap: var(--spacing-large);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    #channel-users {
        display: flex;
        gap: var(--spacing-small);
        flex-wrap: wrap;
        justify-content: center;
        margin-block-start: var(--spacing-medium);

    }

    .footer-info {
        font-family: var(--mono);
        text-transform: uppercase;
        color: var(--light-brown);
        font-size: calc(0.8 * var(--body-copy));
        line-height: 1.5rem;
        letter-spacing: 0.2rem;
    }

    /* used the dev tools to see what I needed to target to get the footer design to work */
    /* I saw I needed address, h3, a, and image to be targeted */
    address {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-xs);
        background-color: var(--cream);
        border-radius: 0.3rem;
        overflow: hidden;
        position: relative;
        border-block-start: solid var(--orange) calc(2 * var(--court-lines));
        border-block-end: solid var(--mid-brown) calc(1 * var(--court-lines));
        border-inline: solid var(--mid-brown) calc(1 * var(--court-lines));
        padding: var(--spacing-small);
        max-width: calc(20 * var(--spacing-small));
        /* width: 100%; */

        img {
            display: none;
        }

        h3 {
            color: var(--ink);
            font-family: var(--body-font);
            font-size: var(--body-copy);
            letter-spacing: 0.1rem;
        }

        a {
            font-family: var(--mono);
            font-size: var(--body-copy);
            color: var(--mid-brown);
            font-size: calc(0.85 * var(--body-copy));
            font-family: var(--scoreboard-font);
            text-decoration: underline;
            text-underline-offset: 0.5rem;
            &:hover {
                color: var(--orange);
            }
        }
    }
}