@import url('https://fonts.googleapis.com');
/* No symbols before a selection like "body" selects the element associated with the name
a . is for selecting a class such as .site-nav which we created in the index file
a # is for selecting an ID such as #header */
body {
    background-color: #f0f0f0;
    display: flex; /*enables flexbox layout*/
    /* flex is applied to a container (body in this case) and its direct children (nav, main
    because in main we have these in the body) become flex items, allowing us in this case
    to move nav to the left of main for desktop and to the bottom of the screen for mobile */
    /* By default, flex items are laid out in a row (horizontally) */
    min-height: 100vh; /*makes body take full height of viewport, number as a percentage*/
    padding-right: 24px;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif; /*font from Google Fonts*/
}

.site-nav {
    min-width: 240px;
    padding: 16px; /*adds space inside the nav container,
    space of top, left, right, and bottom*/
    background-color: #222;
    color: #ffffff; 
    border-radius: 8px; /*rounded corners*/
    font-size: 18px;
}

.main-content {
    flex-grow: 1;
    padding: 24px;
    box-sizing: border-box;
    max-width: calc(100vw - 240px - 24px - 24px);

}

.nav-list { /*navigation list styling*/
    list-style: none; /*removes default bullet points from list*/
    padding: 2px 4px 2px; /*removes default padding*/
    margin: 0; /*removes default margin*/
}

.nav-list li { /*styling for list items inside nav-list*/
    margin-bottom: 16px; /*adds space between list items*/
    cursor: pointer; /*changes cursor to pointer on hover*/
    justify-self: center; /*centers text horizontally*/
}

.nav-list li:hover {/*effects when hovering over list items*/
    background-color: #444; /*changes background color on hover*/
    padding: 4px 64px 4px; /*adds padding to the left on hover/moves slightly to the right*/
    transition: all 0.2s ease; /*Smooths the animation so the change is not abrupt, 
    "all" means any property that changes (background, padding, etc.) animates
    "0.2s" duration
    "ease" easing function */
    transform: scale(1.1); /*slightly enlarges the item on hover*/
    border-radius: 4px; /*rounded corners*/
}
.media-showcase { /*media showcase container*/
    background-color: #ddd;
    height: 450px;
    display: flex;
    align-items: center;
    justify-content: center; /*centers content horizontally can use start instead of center if I want it on the left*/
    border-radius: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 48px;
    box-sizing: border-box;
    width: 100vw;
    max-width: 100%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /*subtle shadow effect*/;

}

.media-showcase-content {
    display: flex; /*enables flexbox layout*/
    gap: 48px; /*space between media cards*/
    height: 100%;
    flex-shrink: 0;
    padding: 64px;

}

.media-card {
    background-color: #fff;
    border-radius: 8px; /*rounded corners*/
    overflow: hidden; /*prevents content from overflowing the card*/
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /*subtle shadow effect*/
    flex-shrink: 0; /*prevents the card from shrinking when container is too small*/
    cursor: pointer; /*changes cursor to pointer on hover*/
    transition: transform 0.4s ease, box-shadow 0.2s ease; /*smooth transition 
    for transform and shadow*/

}

.media-card img {
    max-height: 100%; /*maintains aspect ratio*/
    width: auto; /*maintains aspect ratio*/
    display: block; /*removes default inline spacing*/
    object-fit: cover; /*ensures image covers the area without distortion*/

}

.media-card.hover { /*does not need a space before .hover because it is a state of media-card*/
    outline: 2px solid #ffc444; /*highlight border for hover card*/
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /*stronger shadow for hover card*/
    transform: scale(1.05); /*slightly enlarges the hover card*/
    z-index: 1; /*bring hover card above others*/
}


.media-card.selected { /*does not need a space before .selected because it is a state of media-card*/
    outline: 2px solid #007BFF; /*highlight border for selected card*/
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /*stronger shadow for selected card*/
    transform: scale(1.1); /*slightly enlarges the selected card*/
    z-index: 1; /*bring selected card above others*/
}

/* Description content styling */
.description-container {
    background-color: #ffffff;
    color: #1e1e1f;
    padding: 16px 3vw; /*inner spacing*/
    margin-top: 16px; /*space between showcase and container*/
    border-radius: 8px; /*rounded corners*/
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /*subtle shadow effect*/;
    justify-content: center;
}

.desc-title {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 8px;
    padding: 32px 128px 32px 128px;
}

.desc-media-panel {
    background-color: #f3f3f3;
    border-radius: 8px;
    padding: 8px;           /* ↓ less space to screenshots */
    margin: 32px auto;      
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.15);
}
.screenshot-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px; /* spacing between screenshots */
}

.screenshot-grid img {
  width: 100%;
  height: auto;
  display: block;
}

.desc-text {
    font-size: 24px;
    line-height: 1.5;
    margin-bottom: 16px;
    padding: 0 128px 16px 128px;
}

.desc-list {
    font-size: 24px;
    line-height: 1.5;
    margin-bottom: 16px;
    padding: 0 128px 16px 128px;
    list-style: none; /*removes default bullet points from list*/
 }

.desc-images {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    padding: 32px;
    margin: 0 auto;
    
}

.desc-images img {
    max-width: 100%;
    object-fit: cover;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    max-height: 1000px;



}


 @media (max-width: 1500px) { /*@media targets devices with a viewport of 1500 or less
    for half screens*/
    body {
        flex-direction: column; /*stacks nav and main vertically*/

    }

    .main-content {
        padding: 16px;
        max-width: calc(100%);

    }

    .site-nav {
        width: 100%;
        padding: 16px 0 16px 16px;;
    }

    /* 🔑 THIS IS THE IMPORTANT PART */
    .nav-list {
        display: flex;
        flex-direction: row;     /* left → right */
        justify-content: center; /* center horizontally */
        align-items: center;
        gap: 24px;
    }

    .nav-list li {
        margin-bottom: 0;        /* remove vertical spacing */
    }
    
    .nav-list li:hover {/*effects when hovering over list items*/
    background-color: #444; /*changes background color on hover*/
    padding: 4px 4px 4px; /*adds padding to the left on hover/moves slightly to the right*/
    transition: all 0.2s ease; /*Smooths the animation so the change is not abrupt, 
    "all" means any property that changes (background, padding, etc.) animates
    "0.2s" duration
    "ease" easing function */
    transform: scale(1.1); /*slightly enlarges the item on hover*/
    border-radius: 4px; /*rounded corners*/
    }

   .media-showcase {
        margin: 0 16px; /*horizontal margin only*/
        height: 250px; /*reduces height for mobile*/
        padding: 24px;
    }
   
    .media-showcase-content {
        padding: 64px 32px;
        height: 80%;

    }
   .description-container {
        margin: 16px -16px 16px 16px; 
        padding: 16px 10vw; /*inner spacing*/

    }
   
    .desc-title {
        font-size: 32px;
        font-weight: bold;
        margin-bottom: 8px;
        padding: 16px 16px 32px 16px;
    }

    .desc-text {
        font-size: 20px;
        line-height: 1.5;
        margin-bottom: 16px;
        padding: 0 16px;
    }

    .desc-media-panel {
        margin: 12px 8px;
        padding: 8px;
    }

    .screenshot-grid {
        grid-template-columns: repeat(1, 1fr);
    }
    .desc-list {
        font-size: 20px;
        line-height: 1.5;
        margin-bottom: 16px;
        padding: 0 16px;
    }

    .desc-images {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        padding: 16px;
        max-width: 100%;
    }
}

 @media (max-width: 768px) { /*@media targets devices with a viewport of 768 or less
    which is common for tablets and smartphones*/
    body {
        flex-direction: column; /*stacks nav and main vertically*/

    }

    .site-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 1000;
        width: 100%; /*nav takes full width of screen*/
        order: 2; /*moves nav to the bottom*/
        padding: 12px;
        
        max-height: 48px; /* collapsed height for mobile view */
        overflow: hidden; /* hides items that exceed the max height */
        border-radius: 0; /*rounded corners on top only*/
        transition: 0.3s ease; /*smooth transition for expanding/collapsing*/

    }

    .nav-list li:hover {/*effects when hovering over list items*/
    background-color: #444; /*changes background color on hover*/
    padding: 4px 4px 4px; /*adds padding to the left on hover/moves slightly to the right*/
    transition: all 0.2s ease; /*Smooths the animation so the change is not abrupt, 
    "all" means any property that changes (background, padding, etc.) animates
    "0.2s" duration
    "ease" easing function */
    transform: scale(1.1); /*slightly enlarges the item on hover*/
    border-radius: 4px; /*rounded corners*/
    }  

    .main-content {
        order: 1; /*main content appears first*/
        padding: 16px;
        max-width: calc(100%);

    }

    .media-showcase {
        margin: 0 16px; /*horizontal margin only*/
        height: 250px; /*reduces height for mobile*/
        padding: 24px;
    }
   
    .media-showcase-content {
        padding: 64px 32px;
        height: 80%;

    }
   .description-container {
        margin: 16px -16px 16px 16px; 
        padding: 16px 10vw; /*inner spacing*/

    }
   
    .desc-title {
        font-size: 32px;
        font-weight: bold;
        margin-bottom: 8px;
        padding: 16px 16px 32px 16px;
    }

    .desc-text {
        font-size: 20px;
        line-height: 1.5;
        margin-bottom: 16px;
        padding: 0 16px;
    }

    .desc-media-panel {
        margin: 12px 8px;
        padding: 8px;
    }

    .screenshot-grid {
        grid-template-columns: repeat(1, 1fr);
    }
    .desc-list {
        font-size: 20px;
        line-height: 1.5;
        margin-bottom: 16px;
        padding: 0 16px;
    }

    .desc-images {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        padding: 16px;
        max-width: 100%;
    }
}