/* AI was used to generate the boilerplate and a template for grid, specific placement for each section was added later */

/* Make the page into grid (2 width x 3 height grid) */
body {
    display: grid;
    /* Use fractions and relative sizing. Sidebar is 15rem, rest is flexible */
    grid-template-columns: 5rem 1fr; 
    grid-template-rows: auto 1fr auto;
    grid-template-areas: /* "Draw" the layout of the page */
        "header header"
        "aside main"
        "footer footer";
    gap: 1.5rem;
    margin: 0;
    min-height: 100vh;
}

/* Header at the top, span over the first row*/
header {
    grid-area: header;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2.5rem;
}

/* Aside on the left of the second row*/
aside {
    grid-area: aside;
    padding: 1.5rem 0 1.5rem 1.5rem; /* Padding on right handled by gap */
}

/* Main on the right of the second row */
main {
    grid-area: main;
    padding: 1.5rem 2.5rem 1.5rem 0; /* Padding on left handled by gap */
    display: flex;
    flex-direction: column;
    gap: 2rem; 
}

/* Footer on the last row */
footer {
    grid-area: footer;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
    gap: 1rem;
}

/* --- RESPONSIVE DESIGN When the screen get smaller --- */
@media (max-width: 800px) {
    /* Switch to a single-column layout */
    body {
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "aside"
            "main"
            "footer";
        gap: 1rem;
    }

    /* Stack header items vertically and center them */
    header {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
        padding: 1rem;
    }

    /* Remove side padding */
    aside {
        padding: 0 1rem;
    }

    /* Add normal padding back */
    main {
        
        padding: 0 1rem 1.5rem 1rem;
    }
}