/* ---------------------------------- */
/* 2.1: CSS Reset and Root Setup      */
/* ---------------------------------- */
*, *::before, *::after {
    box-sizing: border-box; /* Easiest way to manage padding/borders */
}

/* Remove default margins/padding for a clean start */
body, h1, h2, p, ul, ol, figure, blockquote {
    margin: 0;
    padding: 0;
}

/* Use a wrapper to set up the grid */
#app-container {
    /* STICKY FOOTER with CSS Grid */
    display: grid;
    /* 1. 'auto' for header height
       2. '1fr' for main content to take all available space
       3. 'auto' for footer height
    */
    grid-template-rows: auto 1fr auto; 
    min-height: 100vh; /* Ensure the container is at least full height of the viewport */
}

/* Default to a readable font size and line-height */
body {
    font-family: sans-serif;
    line-height: 1.5;
    background-color: #fff; /* Ensure a clean background */
    color: #333; /* Good default text color */
}

/* Make sure header, main, and footer are wide by default */
header, main, footer {
    width: 100%;
    /* Add padding to prevent content from touching the edges */
    padding: 1rem; 
}

/* Set max-width for content inside the main regions for better readability */
main {
    max-width: 1200px;
    margin: 0 auto; /* Center the main content horizontally */
    padding: 2rem 1rem;
}

/* ---------------------------------- */
/* 2.2: Header Styling and Alignment  */
/* ---------------------------------- */
header {
    background-color: #2c3e50; /* Dark background */
    color: #ecf0f1; /* Light text */
    padding: 1rem 2rem;
    
    /* Use Flexbox for internal alignment */
    display: flex;
    justify-content: space-between; /* Pushes children (logo & nav) to opposite ends */
    align-items: center; /* Vertically centers children */
}

/* Navigation List Styling */
nav ul {
    list-style: none; /* Remove bullet points */
    display: flex; /* Flexbox for horizontal alignment of nav items */
    gap: 1.5rem; /* Space between links */
}

nav a {
    color: #ecf0f1;
    text-decoration: none;
    font-weight: bold;
    padding: 0.5rem;
    border-radius: 4px;
    /* ACCESSIBILITY: Visible focus state for keyboard navigation */
    outline-offset: 2px;
}

/* ACCESSIBILITY: State styles */
nav a:hover,
nav a:focus {
    background-color: #34495e;
    text-decoration: underline;
}

/* ---------------------------------- */
/* 2.3: Footer Styling                */
/* ---------------------------------- */
footer {
    background-color: #34495e;
    color: #bdc3c7;
    text-align: center;
    padding: 1rem;
    font-size: 0.9rem;
}