body {
        font-family: Arial, sans-serif;
        margin: 20px;
        background-color: #417592;
      }
      h1 {
        text-align: center;
        color: #333;
      }
      .outcome {
        background: #fff;
        border: 1px solid #ccc;
        margin: 8px 0;
        border-radius: 6px;
        padding: 10px;
        cursor: pointer;
      }
      .outcome h3 {
        margin: 0;
        font-size: 16px;
        color: #00509e;
      }
      /* Questions section (applies to both numbered and bulleted lists) */
.questions {
  display: none;
  margin-top: 10px;
  padding-left: 25px;   /* indentation */
  font-size: 14px;
}

.questions li {
  margin: 6px 0;
  line-height: 1.5;
}

/* Ensure ordered lists have consistent numbering style */
.questions ol {
  list-style-type: decimal;
  padding-left: 25px;
}

/* Ensure unordered lists are styled if used */
.questions ul {
  list-style-type: disc;
  padding-left: 25px;
}
      /* Button styling */
      .nav-buttons {
        display: flex;
        justify-content: center;
        margin-top: 30px;
        gap: 15px;
      }
      .nav-buttons a {
        text-decoration: none;
        background: #00509e;
        color: #fff;
        padding: 10px 18px;
        border-radius: 6px;
        font-size: 14px;
        transition: background 0.3s ease;
      }
      .nav-buttons a:hover {
        background: #003f7f;
      }
    .unit {
         background-color: #e0f2f7;  /* light contrasting background */
         border: 1px solid #00509e; /* darker border for emphasis */
        border-radius: 6px;
        padding: 12px 15px;
        margin: 12px 0;
        font-size: 16px;
         color: #00509e;
         text-align: center;        /* centers the text inside the unit block */
         cursor: default;           /* no pointer, since this is not clickable */
         transition: background 0.2s ease;
    }
    /* Subunit block styling */
    .subunit-list {
  display: none;       /* hidden by default */
  margin-left: 20px;   /* indent from the main unit */
  margin-top: 5px;
  flex-direction: column;
}

.subunit {
  display: block;       /* make each link a block so they stack vertically */
  padding: 8px 12px;
  margin: 4px 0;        /* spacing between links */
  background-color: #f0fbff;
  color: #00509e;
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.2s ease;
}

.subunit:hover {
  background-color: #d0eef9;
}

.answer {
  display: none;
  margin-top: 6px;
  padding: 6px 10px;
  background: #eef9f3;
  border-left: 3px solid #28a745;
  border-radius: 4px;
  font-size: 14px;
  color: #333;
}

.answer-btn {
  margin-left: 10px;
  padding: 4px 8px;
  font-size: 12px;
  cursor: pointer;
  background-color: #00509e;
  color: white;
  border: none;
  border-radius: 4px;
  transition: background 0.3s ease;
}

.answer-btn:hover {
  background-color: #003f7f;
}