/* Basic Reset and Setup */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: sans-serif;
    line-height: 1.6;
    background-color: #f4f4f9;
    color: #333;
}

/* --- Header Styles --- */
.site-header {
    background-color: #007bff;
    color: white;
    padding: 1em 0 1em 1em;
    display: flex;
    /* justify-content: space-between; */
    align-items: center;
    flex-wrap: wrap; /* Allows items to wrap on smaller screens */
}

.site-header h1 {
    font-size: 1.8em;
    margin-right: 1em;
}

.site-header nav ul {
    list-style: none;
    display: flex;
}

.site-header nav ul li a {
    color: white;
    text-decoration: none;
    padding: 0.5em 1em;
    display: block;
}

.site-header nav ul li a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

/* --- Main Body Styles --- */
.site-main {
    padding: 20px;
    min-height: 70vh; /* Ensures the main content takes up most of the viewport height */
    display: flex;
    flex-direction: column; /* Default stack for small screens */
    gap: 20px;
}

.content-section {
    flex-grow: 1;
    padding: 20px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

    .text {
      padding: 10px 0;
    }

    .image-centered {
      display: block;
      margin: 0 auto;
    }
}

.sidebar {
    padding: 20px;
    background-color: #e9ecef;
    border-radius: 8px;

    .text {
      padding: 10px 0;
    }

    .image-centered {
      display: block;
      margin: 0 auto;
    }
}

/* --- Util classes --- */
.padding-bottom-10 {
  padding-bottom: 10px;
}

.padding-bottom-20 {
  padding-bottom: 20px;
}

.margin-bottom-10 {
  margin-bottom: 10px;
}

.rounded-8 {
  border-radius: 8px;
}

.white {
  background-color: #ffffff;
}

.lite-gray {
  background-color: #f7f6f7;
} 

/* --- Footer Styles --- */
.site-footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 1em;
}

/* ================================================= */
/* RESPONSIVENESS WITH MEDIA QUERIES        */
/* ================================================= */

/* Media Query for Tablets and Desktops (screens wider than 768px) */
@media (min-width: 768px) {
    
    /* Change main layout to a two-column design */
    .site-main {
        flex-direction: row; /* Layout content and sidebar side-by-side */
    }

    .content-section {
        flex: 3; /* Content takes up 3 parts of the space */
        order: 1;
    }

    .sidebar {
        flex: 1; /* Sidebar takes up 1 part of the space (making it smaller) */
        order: 2;
    }

    /* Adjust header for better desktop navigation */
    .site-header {
        padding: 1em 4em;
    }
}

/* Media Query for very large screens (optional) */
@media (min-width: 1200px) {
    .site-main {
        max-width: 1200px;
        margin: 0 auto; /* Center the main content */
    }
}