/* ========================================================================== 
   1. Global Styles & Reset
   ========================================================================== */

/* A simple reset for consistent browser rendering */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

main {
  flex-grow: 1;
}

/* Define the black-and-white theme on the body */
body {
  display: flex;
  flex-direction: column; /* Arrange children vertically */
  min-height: 100vh;      /* Make the body at least the height of the viewport */
  font-family: 'Montserrat', sans-serif;
  background-color: #ffffff; /* Pure white background */
  color: #111111;           /* Off-black for text is easier on the eyes */
  line-height: 1.6;
}

/* ========================================================================== 
   2. Header
   ========================================================================== */

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background-color:#1A1A1A; /* Black background */
  color: #ffffff;           /* White text */
  border-bottom: 1px solid #333; /* Dark border for subtle separation */
}

/* 3-column layout */
.site-title, .page-center, .site-logo {
  flex: 1;
}

/* --- Header Left Column (Site Title) --- */
.site-title {
  text-align: left;
}

.site-title a {
  font-size: 1.5rem;
  font-weight: bold;
}

/* --- Logo --- */
.site-logo {
  text-align: right;
}

.site-logo img {
  height: auto;        /* Keep aspect ratio */
  max-height: 120px;   /* Maximum height on desktop */
  width: auto;         /* Maintain width */
}

/* --- Header Middle Column (Page Title & Nav) --- */
.page-center {
  text-align: center;
}

.page-center h2 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 2rem;
}

.page-center nav a {
  margin: 0 10px;
  font-size: 1rem;
  color: #bbbbbb; /* Slightly less prominent inactive links */
}

/* General Header Link Styles */
header a {
  color: #ffffff;
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

header a:hover {
  color: #dddddd;
}

.page-center nav a.active {
  color: #ffffff;
  font-weight: bold;
  text-decoration: underline;
}

/* ========================================================================== 
   4. Footer
   ========================================================================== */

footer {
  text-align: center;
  padding: 20px;
  margin-top: 40px;
  background-color: #1A1A1A;
  color: #ffffff;
}

/* ========================================================================== 
   5. Responsive Styles for Phones & Small Screens
   ========================================================================== */
@media (max-width: 768px) {
  header {
    flex-direction: column; /* Stack header elements vertically */
    padding: 1rem;
  }

  .site-title, .page-center, .site-logo {
    flex: unset;
    text-align: center;  /* Center all header elements */
    margin-bottom: 10px;
  }

  .site-logo img {
    max-height: 60px;    /* Smaller logo on phones */
  }

  .page-center h2 {
    font-size: 1.5rem;  /* Smaller page title */
  }

  .page-center nav a {
    display: inline-block;
    margin: 5px 8px;    /* More spacing for stacked layout */
    font-size: 0.9rem;
  }
}