/* General Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

/* 1. THE GRID (Macro Layout) */
.grid-container {
    display: grid;
    height: 100vh;
    grid-template-columns: 200px 1fr; /* Sidebar is 200px, content takes rest */
    grid-template-rows: 60px 1fr 50px; /* Header, Content, Footer heights */
    grid-template-areas: 
        "header header"
        "sidebar content"
        "footer footer";
}

/* Assigning areas to classes */
.header  { grid-area: header; background: #2c3e50; color: white; }
.sidebar { grid-area: sidebar; background: #ecf0f1; padding: 20px; }
.content { grid-area: content; background: #fff; padding: 20px; }
.footer  { grid-area: footer; background: #34495e; color: white; text-align: center; line-height: 50px; }

/* 2. THE FLEXBOX (Micro Layout) */
.header {
    display: flex;
    justify-content: space-between; /* Pushes logo and nav to opposite ends */
    align-items: center;            /* Vertically centers items */
    padding: 0 20px;
}

.nav-links {
    display: flex;
    gap: 20px; /* Modern way to space flex items */
}

.nav-links a {
    color: white;
    text-decoration: none;
}

/* Responsive Tweak: Stack on small screens */
@media (max-width: 600px) {
    .grid-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 1fr auto;
        grid-template-areas: 
            "header"
            "sidebar"
            "content"
            "footer";
    }
}