/* AI was used to generate the boilerplate, specific color and properties value was later adjust */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Make the screen scroll smoothly when clicking internal links */
html {
  scroll-behavior: smooth;
}

/* Set (font, color and size of text) and (background color) for the whole page */
body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f4f9f5;
  color: #333;
  line-height: 1.6;
}

/* --- HEADER STYLING --- */
/* Background, text color, shadow for the whole header */
header {
  background-color: rgb(0, 110, 55);
  color: #ffffff;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
}

/* Style the whole logo, name, slogan block. */
.brand {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  color: inherit;
  position: relative;
  z-index: 1;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Subtle lift effect on hover */
.brand:hover {
  transform: translateY(-2px);
}

/* Resize the logo */
.logo {
  height: 4rem;
  width: auto;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Slightly enlarge the logo on hover for a dynamic effect */
.brand:hover .logo {
  transform: scale(1.05);
}

/* NAVIGATION BAR ON THE TOP */
/* Style the link list */
.top-nav ul {
  list-style: none;
  display: flex; /* Make the list horizontal */
  flex-wrap: wrap; /* Allows wrapping on smaller screens if needed */
  justify-content: center;
  gap: 1rem;
}

/* Style the link: no underline, color, bold font, add space around and round the border */
.top-nav a {
  text-decoration: none;
  color: white;
  font-weight: bold;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  transition: all 0.2s ease; /* Smooth transition when hover */
}

/* Effect when hover */
.top-nav a:hover,
.top-nav a:focus {
  background-color: rgb(37, 175, 106);
  outline: 2px solid white; /* Focus state for accessibility */
}

/* RESPONSIVE: When the screen is large, show the sticky sidebar navigation */
@media (min-width: 801px) {
  /* --- ASIDE & STICKY NAVIGATION BAR --- */
  /* Floating table of contents sidebar that slides in from the left */
  #floating-toc {
    border-radius: 1rem;
    color: white;
    z-index: 9999;
    display: flex;
    position: fixed;
    top: 50%;
    left: -230px; /* Initially hidden off-screen */
    width: 270px;
    transform: translateY(-50%);
    transition: left 0.5s cubic-bezier(0.175, 0.885, 0.32, 1); /* Smooth slide-in effect with a snappy, elastic animation */
    background-color: transparent;
  }

  /* Slide in when hovering */
  #floating-toc:hover {
    left: 0;
  }

  /* Icon/tab visible at the edge to trigger sidebar */
  .toc-icon {
    width: 50px;
    height: 50px;
    background-color: #2e7d32;
    display: flex;
    align-self: center;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 0 5rem 5rem 0; /* Semi-circular tab on the left edge */
    font-size: 1.5rem;
  }

  /* Main content area of the sidebar */
  .toc-content {
    padding: 20px;
    width: 220px;
    border-radius: 1rem;
    background-color: #2e7d32;
    box-shadow: 5px 0 20px rgba(0, 0, 0, 0.2);
  }

  /* Navigation link list styling */
  .toc-links {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  /* Navigation list items */
  .toc-links li {
    display: flex;
    justify-content: space-between;
    text-align: left;
  }

  /* Navigation link styling */
  .toc-links a {
    display: block;
    color: #e8f5e9;
    text-decoration: none;
    font-weight: 500;
    font-size: 1rem;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
  }
  /* Decorative line that grows on hover */
    .toc-links a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0;
    background-color: #ffffff;
    transition: height 200ms cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 9999px;
  }

  /* Link hover effect with glow */
  .toc-links a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    padding-left: 1.5rem;
  }
   /* Grow the decorative line on hover */
  .toc-links a:hover::before,
  .toc-links a:focus::before {
    height: 100%;
  }
}

/* --- MAIN CONTENT & CARDS --- */
/* A card ~ A section of content. Styling background, padding, round border and add shadow  */
.card {
  background: white;
  padding: 2rem;
  border-radius: 0.5rem;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.04);
  transition: all 0.1s;
}

/* Effect when hover the card */
.card:hover {
  outline: rgb(105, 189, 36) solid 3px;
}

/* Heading of a card, change color, add space to bottom. Border-bottom is to create an horizontal line effect */
.card h2 {
  color: rgb(0, 147, 73);
  margin-bottom: 1rem;
  border-bottom: 2px solid #e0e0e0;
  padding-bottom: 0.25rem;
}

/* Making image having responsive size, scaling with the parent (card) */
.responsive-img {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
  margin-top: 1rem;
}

/* --- TABLE STYLING --- */
/* Style table size, border model */
table {
  width: 100%;
  border-collapse: collapse; /* Cell will share border */
  margin-top: 0.5rem;
}

/* Style the table caption */
table caption {
  margin: 1em;
  font-weight: bold;
}

/* Style cells */
th,
td {
  border: 1px solid #ddd;
  padding: 1rem;
  text-align: left;
}

/* Style heading cells*/
th {
  background-color: rgb(0, 110, 55);
  color: white;
}

/* Different color if a heading cell of a row */
tbody th {
  background-color: #f1f8f3;
  color: #333;
}

/* Effect when hover a row*/
tbody tr:hover {
  background-color: #eaf5ec;
}

/* --- FOOTER --- */
/* Style the footer color, text */
footer {
  background-color: #222;
  color: #ccc;
  text-align: center;
}

/* Style the nav link list */
.footer-nav ul {
  list-style: none;
  display: flex; /* Make the nav horizontal */
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}

/* Styling the link in the footer navigation */
.footer-nav a,
.footer-links a {
  text-decoration: none;
  color: #4caf50;
  transition: color 0.3s;
}

/* Effect when hover */
.footer-nav a:hover,
.footer-links a:hover {
  color: white;
}

/* --- RESPONSIVE: When the screen get small, change the internal nav menu  --- */
@media (max-width: 800px) {
  aside {
    /* We make the parent itself sticky so it stays at the top of the screen */
    position: sticky;
    top: 0;
    z-index: 100; /* Higher number to ensures it stays on top of images/cards */
    padding: 0; /* Removing padding so the bar spans the full width */
    background-color: white;
    display: flex;
    justify-content: center;
  }

  /* Hide the internal navigation icon */
  #floating-toc .toc-icon {
    display: none;
  }

  /* Horizontal pill menu */
  #floating-toc {
    top: 0px;
    z-index: 10;
    padding: 1rem;
    border-left: none;
    border-bottom: none;
    border-radius: 0;
    display: flex;
    justify-content: center;
  }

  /* Make the list horizontal */
  #floating-toc ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; /* Make sure the pill menu wrap to new line when screen too small */
    justify-content: center;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  #floating-toc li {
    margin-bottom: 1em;
  }

  /* Style the link of internal navigation */
  #floating-toc a {
    background-color: #f4f9f5;
    padding: 0.5rem 1rem;
    border-radius: 1rem; /* Pill shape */
    border: 1px solid #ddd;
    transition: all 0.3s ease;
    text-decoration: none;
    color: black;
  }

  /* Effect when hover the link */
  #floating-toc a:hover {
    background-color: rgb(0, 147, 73);
    color: white;
  }
}

/* ------------------------------------------------------------------ */
/* INDEX.HTML Specific */
/* --- SEARCH BOX --- */
/* Display all form item horizontally */
.search-form {
  display: flex;
  flex-wrap: wrap; /* Allows stacking on tiny screens */
  gap: 0.5rem;
  margin-top: 0.5rem;
}

/* Hide the label text */
.search-form label {
  flex-basis: 100%;
}

/* Style the search input box*/
.search-form input {
  flex: 1;
  min-width: 200px;
  padding: 0.75rem;
  border: 1px solid #ccc;
  border-radius: 0.25rem;
  font-size: 1rem;
}

/* Style the search button */
.search-form button {
  padding: 0.75rem 1.5rem;
  background-color: rgb(0, 110, 55);
  color: white;
  border: none;
  border-radius: 0.25rem;
  font-size: 1rem;
  cursor: pointer; /* Change the cursor appear when hover*/
  transition: background-color 0.3s;
}

/* Effect when hover */
.search-form button:hover,
.search-form button:focus {
  background-color: rgb(37, 175, 106);
}

/* ------------------------------------------------------------------ */
/* JOBS.HTML Specific */
/* Styling the job cards, add border to the left */
.job-description {
  border-left: 6px solid rgb(0, 110, 55); /* Simple accent line on the left */
}

/* Styling the Job metadata into a grid-like */
.job-meta {
  display: grid;
  grid-template-columns: 10rem 1fr; /* Align labels and values perfectly */
  gap: 0.5rem;
  margin: 1.5rem 0;
  font-size: 0.95rem;
}

/* Bold and slightly change color of metadata */
.job-meta dt {
  font-weight: bold;
  color: #666;
}

/* Content Spacing */
.job-description h3 {
  font-size: 1.1rem;
  margin: 1.5rem 0 0.5rem 0;
  color: #444;
}

/* Content Spacing */
.job-description p,
.job-description li {
  margin-bottom: 0.5rem;
  color: #555;
}

/* Content Spacing */
.job-description ul,
.job-description ol {
  padding-left: 1.2rem;
}

/* ------------------------------------------------------------------ */
/* APPLY.HTML Specific */
/* Styling the list in the introduction */
#application_introduction ul {
  padding-left: 1em;
}

/* --- FORM STYLING --- */

/* Style each field set: background color, border and spacing */
fieldset {
  border: 1px solid #e0e0e0;
  border-radius: 0.5rem;
  padding: 1.5rem;
  margin-bottom: 2rem;
  background-color: #ffffff;
}

/* Style the legend color, spacing */
legend {
  font-weight: bold;
  color: rgb(0, 110, 55);
  padding: 0 0.75rem;
  font-size: 1.1rem;
  letter-spacing: 0.05rem;
}

/* Align labels and inputs using flexbox within the <p> tags */
.form-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 1.25rem;
}

/* Fixed width for labels creates an alignment line */
.form-row label {
  flex: 0 0 10em;
  font-weight: 600;
  color: #444;
}

/* Style the form input */
.form-row input,
.form-row select,
.textarea-row textarea {
  flex: 1; /* Inputs take up remaining space */
  min-width: 250px;
  padding: 0.75rem;
  border: 1px solid #ccc;
  border-radius: 0.25rem;
  font-size: 1rem;
  transition: all 0.3s;
}

/* Effect when focus (using the input) */
.form-row input:focus,
.form-row select:focus,
textarea:focus {
  outline: none;
  border-color: rgb(0, 147, 73);
  box-shadow: 0 0 0 3px rgba(0, 147, 73, 0.1);
}

/* Radio and Checkbox Styling */
.radio-group,
.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding: 0.5rem 0;
}

/* Special case for Textarea: label and input in vertical instead of horizontal */
.textarea-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}

/* Bold textarea label */
.textarea-row label {
  font-weight: bold;
}

/* Form Buttons: put button in the center */
.form-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}

/* Style button */
button {
  padding: 0.8rem 2rem;
  font-size: 1rem;
  font-weight: bold;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* Color submit button */
.btn-primary {
  background-color: rgb(0, 110, 55);
  color: white;
}

/* Effect when hover */
.btn-primary:hover {
  background-color: rgb(0, 80, 40);
  transform: translateY(-2px);
}

/* Color clear form button */
.btn-secondary {
  background-color: transparent;
  color: #666;
  border: 1px solid #ccc;
}

/* Effect when hover */
.btn-secondary:hover {
  background-color: #f5f5f5;
  transform: translateY(-2px);
}

/* Show invalid fields more clearly when the form is filled incorrectly */
.form-row input:focus:invalid,
.form-row select:focus:invalid,
.textarea-row textarea:focus:invalid {
  border: 1px solid #d93025;
  background-color: #fff5f5;
}

/* Show valid fields with a neat green border */
.form-row input:valid,
.form-row select:valid {
  border: 1px solid #2e7d32;
}

/* Make browser autofill match the color style */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: #333;
  -webkit-box-shadow: 0 0 0px 1000px #ffffff inset;
  transition: background-color 5000s ease-in-out 0s;
  font-family: inherit;
}

/* Make input, select, textarea and button use the same font as the page */
.form-row input,
.form-row select,
.textarea-row textarea,
button {
  font-family: inherit;
  color: #333;
}

/* Make placeholder text match the rest of the form better */
.form-row input::placeholder,
.textarea-row textarea::placeholder {
  font-family: inherit;
  color: #777;
}


/* ------------------------------------------------------------------ */
/* ABOUT.HTML Specific */
#acknowledgement {
  text-align: center; /* Centers the heading and the paragraph text */
}

/* Style the flag group */
.flag-container {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap; /* Allows flags to stack nicely on very small screens */
  margin-top: 1.5rem;
}

/* Style each flag */
.flag-container img {
  height: 6rem;
  width: auto;
  border-radius: 0.25rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Adds a very slight shadow to make them pop */
}

/* Style the Our Stories section layout */
#our_stories {
  display: flex;
  justify-content: center;
  gap: 2rem;
}

/* Responsive for our stories section - to make sure when the screen too small, the image would be below the text */
@media (max-width: 1000px) {
  #our_stories {
    display: block;
  }
}


/* Spacing for the group information part */
.group-info {
  padding-left: 1.2rem;
  color: #555;
}

/* Spacing for each item */
.group-info li {
  margin-bottom: 0.5rem;
}

/* Style the contributor name */
.contributor-list dt {
  font-size: 1.1rem;
  font-weight: bold;
  color: rgb(0, 110, 55);
  margin-top: 1.5rem;
  border-bottom: 1px solid #eee; /* Subtle dividing line */
  padding-bottom: 0.25rem;
}

/* Style the contribution info: spacing and text color */
.contributor-list dd {
  margin: 0.75rem 0 0 0; /* Removes default indent, adds top spacing */
  color: #444;
}

/* Style the block quote */
.contributor-list blockquote {
  margin: 0.75rem 0 0 0;
  padding: 0.75rem 1.25rem;
  border-left: 4px solid rgb(0, 147, 73); /* Green accent line */
  background-color: #f4f9f5; /* Light green background from your theme */
  font-style: italic;
  border-radius: 0 0.5rem 0.5rem 0;
  color: #555;
}

/* Style the get in touch form */
.about-contact-form {
  margin-top: 1rem;
}

/* Fieldset: full-width, bordered box */
.about-fieldset {
  width: 100%;
  border: 1px solid #e0e0e0;
  border-radius: 0.5rem;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  background-color: #ffffff;
}

/* Legend: section label */
.about-legend {
  font-weight: bold;
  color: rgb(0, 110, 55);
  padding: 0 0.75rem;
  font-size: 1.1rem;
  letter-spacing: 0.05rem;
}

/* Each label + input row displayed horizontally */
.about-form-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 1.25rem;
}

/* Fixed-width label creates a clean alignment column */
.about-form-row label {
  flex: 0 0 10em;
  font-weight: 600;
  color: #444;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

/* Text and email inputs */
.about-form-row input {
  flex: 1;
  min-width: 250px;
  padding: 0.75rem;
  border: 1px solid #ccc;
  border-radius: 0.25rem;
  font-size: 1rem;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: #333;
  transition: all 0.3s;
}

/* Green border + glow on focus */
.about-form-row input:focus {
  outline: none;
  border-color: rgb(0, 147, 73);
  box-shadow: 0 0 0 3px rgba(0, 147, 73, 0.1);
}

/* Red border when field is focused but invalid */
.about-form-row input:focus:invalid {
  border-color: #d93025;
  background-color: #fff5f5;
}

/* Green border when field value is valid */
.about-form-row input:valid {
  border-color: #2e7d32;
}

/* Placeholder text style */
.about-form-row input::placeholder {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: #777;
}

/* Label stacked above textarea */
.about-textarea-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}

/* Bold textarea label */
.about-textarea-row label {
  font-weight: bold;
  color: #444;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

/* Textarea itself */
.about-textarea-row textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ccc;
  border-radius: 0.25rem;
  font-size: 1rem;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: #333;
  resize: vertical;
  transition: all 0.3s;
}

/* Green border + glow on focus */
.about-textarea-row textarea:focus {
  outline: none;
  border-color: rgb(0, 147, 73);
  box-shadow: 0 0 0 3px rgba(0, 147, 73, 0.1);
}

/* Red tint when textarea is focused but too short */
.about-textarea-row textarea:focus:invalid {
  border-color: #d93025;
  background-color: #fff5f5;
}

/* Placeholder text style */
.about-textarea-row textarea::placeholder {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: #777;
}

/* Button row: centred, with a gap between buttons */
.about-form-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}

/* Primary (submit) button */
.about-btn-primary {
  padding: 0.8rem 2rem;
  font-size: 1rem;
  font-weight: bold;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background-color: rgb(0, 110, 55);
  color: white;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* Darken on hover */
.about-btn-primary:hover {
  background-color: rgb(0, 80, 40);
  transform: translateY(-2px);
}

/* Secondary (clear) button */
.about-btn-secondary {
  padding: 0.8rem 2rem;
  font-size: 1rem;
  font-weight: bold;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background-color: transparent;
  color: #666;
  border: 1px solid #ccc;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* Subtle background on hover */
.about-btn-secondary:hover {
  background-color: #f5f5f5;
  transform: translateY(-2px);
}