/* Base Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Inter', sans-serif;
}

:root { /* Based on latex/header.tex */
  --green-dark: rgb(39, 83, 23);   /* #275317 */
  --orange-dark: rgb(224, 131, 6); /* #E08306 */
  --teal-dark: rgb(0, 140, 140);   /* #008C8C */
  --orange-cb: rgb(217, 115, 38);  /* #D97326 */
  --gray-75: rgb(191, 191, 191);   /* #BFBFBF */
}

/* Basic layout */
body {
  background-color: #f8f9fa;
  color: #333;
  line-height: 1.6;
  padding: 20px;
}

a, a:visited {
  color: var(--orange-dark);
  text-decoration: none;
  font-weight: 500;
}

a:hover {
  text-decoration: underline;
}

/* Top bar menu */
nav {
  background: var(--green-dark);
  color: white;
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav a, nav a:visited {
  color: white;
  text-decoration: none;
  margin: 0 15px;
  font-weight: 500;
}

nav a:hover {
  text-decoration: underline;
}

/* Content container */
.container {
  max-width: 800px;
  margin: 30px auto;
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Tables */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 15px;
}

th, td {
  padding: 10px;
  border: 0px solid #ddd;
  text-align: left;
}

th {
  background: var(--orange-cb);
  color: white;
}

/* Forms */
form {
  margin-top: 20px;
}

/* Style text inputs, textareas, selects, buttons, but not checkboxes/radios */
input:not([type="checkbox"]):not([type="radio"]),
textarea,
select,
button {
  width: 100%;
  padding: 10px;
  margin-top: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
  background: white;
  color: #333;
  appearance: none;
  box-sizing: border-box;
  font-family: inherit;
  min-height: 40px;
}

/* Checkbox and radio styling */
input[type="checkbox"],
input[type="radio"] {
  margin-top: 0; /* remove extra top padding */
  accent-color: var(--orange-dark);
  vertical-align: middle;
}

/* Spacing between checkbox and label text */
label input[type="checkbox"],
label input[type="radio"] {
  margin-right: 8px;
}

label {
  display: flex;          /* Use flexbox */
  align-items: center;    /* Vertically center checkbox and text */
  margin-top: 5px;        /* Add spacing between each checkbox row */
  font-size: 0.95rem;     /* Slightly smaller font for a cleaner look */
}

textarea {
  width: 100%;
  font-size: 1rem;
  min-height: 40px;
  resize: vertical;
}

select:focus {
  border-color: var(--orange-dark);
  outline: none;
}

button {
  background: var(--green-dark);
  color: white;
  cursor: pointer;
}

button:hover {
  background: var(--teal-dark);
}

/* Responsive design */
@media (max-width: 600px) {
  nav {
      flex-direction: column;
      text-align: center;
  }
  
  .container {
      width: 95%;
      padding: 15px;
  }
}