/* ================================
   BASIC PAGE STYLING (REQUIRED)
   ================================ */

/* Body rule — sets background color, font color, font family, and 10px margin */
body {
  background-color: #f6f7fb;   /* light background color */
  color: #111111;              /* main font color */
  font-family: Arial, Helvetica, sans-serif; /* readable sans-serif font */
  margin: 10px;                /* required 10-pixel page margin */
}

/* Centering the main page header (h1 tag) */
h1 {
  text-align: center;
}

/* Centering the site navigation (nav tag) */
nav {
  text-align: center;
}
nav ul {
  list-style: none;         /* removes bullets */
  padding: 0;
  margin: 0;
  display: flex;            /* puts items in a row */
  justify-content: center;  /* centers the menu */
  gap: 20px;                /* spacing between links */
  background-color: #f4f4f4;
  padding: 15px 0;
  border-radius: 8px;
}

nav ul li a {
  text-decoration: none;       /* removes underline */
  color: #333;                 /* text color */
  font-weight: bold;           /* makes it easier to read */
  padding: 8px 14px;           /* clickable padding */
  border-radius: 6px;          /* rounded edges */
  transition: 0.3s;            /* smooth hover animation */
}

/* Hover effect */
nav ul li a:hover {
  background-color: #ddd;
  color: black;
}

/* Active page highlight */
nav ul li a.active {
  background-color: #6fa8dc;
  color: white;
}

/* Centering the footer information (footer tag) */
footer {
  text-align: center;
  margin-top: 20px;
  color: #555;
}

/* ================================
   ADDITIONAL OPTIONAL STYLES
   ================================ */

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  gap: 20px;
  background-color: #f4f4f4;
  padding: 15px 0;
  border-radius: 8px;
}

nav ul li a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
  padding: 8px 14px;
  border-radius: 6px;
  transition: 0.3s;
}

nav ul li a:hover {
  background-color: #ddd;
  color: black;
}

nav ul li a.active {
  background-color: #6fa8dc;
  color: white;
}

article {
  max-width: 600px;   /* optional, keeps it from stretching too wide */
  margin: 0 auto;     /* centers it horizontally */
  text-align: center; /* centers the text inside */
}
section {
  max-width: 900px;
  margin: 20px auto;
  background-color: #ffffff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

footer p {
  margin: 5px 0;
  font-size: 0.95rem;
}
/* ================================
   CENTERING IMAGES ON ALL PAGES
   ================================ */

/* For general images (like hero/top photos) */
img {
  display: block;         /* makes the image act like a block element */
  margin-left: auto;      /* automatically adds equal left margin */
  margin-right: auto;     /* automatically adds equal right margin */
  max-width: 100%;        /* keeps images responsive on smaller screens */
  height: auto;           /* keeps correct proportions */
  border-radius: 10px;    /* optional: adds soft rounded corners */
}
/* ================================
   FIGURE & CAPTION STYLING
   ================================ */

figure {
  text-align: center;       /* centers image and caption together */
  margin: 20px auto;
}

figcaption {
  text-align: center;
  font-size: 0.9rem;
  color: #555;
  margin-top: 5px;
  font-style: italic;
}

/* Highlight for educational notice */
footer p:last-child {
  color: #a00;
  font-weight: bold;
  text-transform: uppercase;
}