/* set a comfortable base for fonts and line spacing */
html {
  font-size: 18px; /* Sets the base font size for the 'rem' unit */
}

body {
  line-height: 1.6; /* increases space between lines of text */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", "Arial", sans-serif;
  color: #333;
}

/* create a centered content column with a maximum width */
.wrapper {
  max-width: 55rem;   /* maximum width of the content area */
  margin-left: auto;  /* these two lines center the wrapper */
  margin-right: auto;
  padding-left: 2rem; /* adds breathing room on smaller screens */
  padding-right: 2rem;
}

.page-content {
  /* This adds vertical space between the header and the content */
  padding-top: 3rem;
}

/* add some vertical rhythm to common elements. */
h1, h2, h3, p, ul, ol {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

a {
  color: #4a4a4a; /* Sets the link color */
  /*text-decoration: none; !* Removes the underline *!*/
}

/* --- Navigation Bar --- */

/* This turns the header into a flex container to control alignment. */
.site-header {
  display: flex;
  justify-content: space-between; /* This pushes the navigation to the right. */
  align-items: baseline;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 1rem;
}

.site-title {
  font-size: 1.75rem;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}

/* This adds horizontal space between each navigation link. */
.site-nav a {
  margin-left: 2rem;
  color: #333;
  font-weight: bold;
  text-decoration: none;
}

.site-footer {
  padding: 2rem;
  margin-top: 4rem;
  font-style: italic;
  color: #333;
  text-align: center; /* This will center the copyright text */
}

/* Styles the links within the footer */
.site-footer a {
  color: #333;
  text-align: center;
  text-decoration: none;
}

.hero-image-container {
  text-align: center;
  margin-bottom: 1rem; /* Adds space AFTER the image */
}

.hero-image-container img {
  max-width: 100%;
  height: auto;
  border-radius: 0px;
  box-shadow: none;
}

.hero-image-container figcaption {
  text-align: center;
  font-size: 0.9em;
  font-style: italic;
  color: #666; /* A medium gray color */
  margin-top: 10px; /* Adds some space between the image and the caption */
}

/* Custom Table Styles */
table {
  /*width: 100%; !* Make table span full width of its container *!*/
  border-collapse: collapse; /* A modern border style */
  margin-bottom: 1.5em; /* Add some space below the table */
}

th, td {
  border: 1px solid #ccc; /* Add a 1px solid gray border */
  padding: 8px; /* Add padding inside each cell */
  text-align: left; /* Align text to the left */
}

th {
  background-color: #f2f2f2; /* Add a light gray background to headers */
  font-weight: bold;
}

/* --- Mobile Responsiveness --- */

/* Styles for the subscription box container */
.subscribe-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px;
  margin-top: 50px;
  margin-bottom: 30px;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  background-color: #f9f9f9;
}

/* This tells the text container to be flexible and shrink if needed */
.subscribe-text {
  flex: 1 1 0;      /* Allows the element to grow and shrink */
  min-width: 0;     /* Prevents the container from overflowing its parent */
}

/* Styles for the text content on the left */
.subscribe-text h3 {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 1.25rem;
}

.subscribe-text p {
  margin-bottom: 0;
  color: #585858;
}

/* Styles for the subscribe button on the right */
.subscribe-button {
  display: inline-block;
  background-color: #212121; /* CHANGED: Updated to black */
  color: #ffffff !important;   /* CHANGED: White text */
  border: 1px solid #212121;   /* ADDED: Border for hover effect */
  padding: 12px 24px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
  white-space: nowrap;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
  margin-left: 20px;
}

.subscribe-button:hover {
  background-color: #ffffff; /* CHANGED: White background on hover */
  color: #212121 !important;   /* CHANGED: Black text on hover */
  text-decoration: none;
}

/*
 Start of responsive styles
 ========================================================================== */

/* This media query targets screens 650px or smaller, like most phones. */
@media screen and (max-width: 650px) {

  /* Your existing responsive styles for the header */
  .site-header {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
  .site-title {
    text-align: center;
  }
  .title-tagline {
    display: block;
    margin-top: 0.25rem;
  }
  .site-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .site-nav a {
    margin-left: 0;
    margin-bottom: 0.5rem;
  }

  /* ADDED: Responsive styles for the subscribe box */
  .subscribe-box {
    flex-direction: column;   /* Stack the text and button vertically */
    align-items: flex-start;  /* Align items to the left */
  }

  .subscribe-button {
    margin-top: 20px;       /* Add space above the button */
    margin-left: 0;         /* Remove the left margin */
    width: 100%;            /* Make the button full-width */
    text-align: center;     /* Center the text inside the button */
    box-sizing: border-box;
  }
}