/* Applies to entire website */
body{
    /* Reset default margin and set font */
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.6;
}

/* Formatting for the website container */
.container {
  /* Activate flexbox layout which allows content to sit side by side */
  display: flex;

  /* Sets viewport height to 100% to allow for full height of the page */ 
  min-height: 100vh;
}

/* Formatting for the sidebar */
.sidebar {
  /* Set fixed width for the sidebar and background color */
  width: 220px;
  background: #2c3e50;

  /* Space around the text and color */
  padding: 20px;
  color: white;
}

/* Style links in the sidebar */
.sidebar a {
  /* Make links block elements for easier clicking, set color and remove underline */
  display: block;
  color: white;
  text-decoration: none;

  /* Space around links */
  margin: 10px 0;
  padding: 8px;

  /* Makes buttons rounded */
  border-radius: 4px;
}

/* Hover effect for sidebar links */
.sidebar a:hover {
  /* Lighten background on hover for better user experience */
  background: #34495e;
}

/* Formatting for the main content area */
.content {
  /* Allow content to take up remaining space and add padding */
  flex: 1;
  padding: 40px;
}

/* Global page-content container for headers, paragraphs, images */
.content-container {
  max-width: 800px;       /* same width for text & images */
  margin: auto;           /* center content */
  text-align: justify;    /* justify text and headers */
  line-height: 1.6;       /* readable spacing */
  display: flex;          /* flex layout for hero image + text */
  gap: 20px;              /* space between image and text */
  flex-wrap: wrap;        /* wrap content on small screens */
}

/* Hero section container */
.hero {
  max-width: 800px;         /* aligns with body text width */
  margin: auto;             /* centers the container */
  text-align: justify;      /* justify headers and paragraphs */
  line-height: 1.5;
  padding: 20px 0;
}

/* Banner image */
.hero-image {
  width: 100%;              /* full width of container */
  height: auto;             /* maintain aspect ratio */
  display: block;           /* forces it on its own line */
  margin-bottom: 20px;      /* space below image */
  border-radius: 6px;       /* optional rounding */
}

h1 {
  /* Set color and spacing for the main header */
  color: #34495e;
  font-weight: 700;         /* bold */
  margin-top: 0;
  margin-bottom: 10px;
  text-align: justify;      /* aligns with paragraphs */
}

/* Formatting for date and location */
h2 {
  margin: 5px 0;
  font-weight: 600;
  text-align: justify;
  color: #e4bc0a;
}

/* Can use for important announcements */
h3 {
  margin-top: 15px;
  font-weight: 700;
  text-align: justify;
  color: #ca0b0b;
}


/* Below is for the main body... */

/* Formating for the workshop topics section */
h4 {
  margin-top: 0;
  color: #000000;
}


/* Formatting for the description section on the homepage */
.description {
  max-width: 800px;
}

/* For the footer (funder) images */
.footer-images {
  display: flex;
  align-items: center;
  gap: 20px;
}

.footer-images > * {
  flex: 1; /* each item takes equal space */
}

.footer-images img {
  width: 100%;      /* fill container */
  max-width: 800px; /* prevents huge images */
  height: auto;
}

.image-with-text {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.image-with-text p {
  margin: 0 0 5px;
  font-size: 14px;
}