/* List */
/* Base list reset */
.vraag-lijst {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Individual items */
.vraag-lijst li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  margin-bottom: .5rem;
  border: 1px solid #e2e8f0; /* light grey border */
  border-radius: 8px;
  background: #fff;
  transition: background 0.2s, box-shadow 0.2s;
}

/* Hover effect */
.vraag-lijst li:hover {
  background: #f8fafc; /* subtle grey background */
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

/* Title links */
.vraag-lijst li a {
  font-size: 1rem;
  font-weight: 500;
  color: #1a365d; /* CBIP dark blue */
  text-decoration: none;
  transition: color 0.2s;
}

.vraag-lijst li a:hover {
  color: #2563eb; /* brighter blue on hover */
}

/* Optional smaller meta (if you later add spans for dates, weeks, etc.) */
.vraag-lijst li span {
  font-size: 0.85rem;
  color: #64748b;
  margin-left: 1rem;
}



/* Questions */
 
.qotw-vote-buttons button,
.qotw-vote-form button {
  font-size: 1.2rem;
  padding: 0.6rem 1.2rem;
  margin: 0.3rem;
  border-radius: 10px;
  border: 1px solid #bbb;
  background-color: #f5f5f5;
  cursor: pointer;
}
.qotw-vote-buttons button:hover,
.qotw-vote-form button:hover {
  background-color: #e0e0e0;
}

.qotw-answer {
  font-size: 1.1rem;
  margin-bottom: 0.4em;
  padding: 0.6em 0.8em;
  border-radius: 8px;
  border: 1px solid #ddd;
}

.qotw-answer.correct:not(.selected) {
  background-color: #eaffea; /* system's correct answer */
}

.qotw-answer.correct.selected {
  background-color: #c8f7c5; /* user selected correct */
  border-left: 5px solid #4caf50;
  font-weight: bold;
}

.qotw-answer.wrong.selected {
  background-color: #ffe4e4;
  border-left: 5px solid #f44336;
  font-weight: bold;
}

.qotw-icon {
  font-weight: bold;
  margin-right: 0.6em;
}
.vraag-title h1 {
  background-color: #2a3b99; /* your default blue */
}

.vraag-van-de-week {
    font-family: inherit;
    color: inherit;
    border-radius: 6px;
    padding: 2rem;
    margin-top: 2rem;
}

/* QOTW v1.2.11.48: back-link + actions layout */
.vvdw-teruglink { margin: 0 0 1rem 0; }
.vvdw-teruglink__a { text-decoration: none; font-size: .95rem; }
.vvdw-teruglink__a:hover, .vvdw-teruglink__a:focus { text-decoration: underline; }
.vvdw-acties { margin-top: 1rem; display: flex; gap: .5rem; flex-wrap: wrap; }
.vvdw-andere-vragen { white-space: nowrap; }

/* v1.2.11.49: top/back link + actions */
.vvdw-teruglink{margin:0 0 1rem 0}.vvdw-teruglink__a{text-decoration:none;font-size:.95rem}.vvdw-teruglink__a:hover,.vvdw-teruglink__a:focus{text-decoration:underline}.vvdw-acties{margin-top:1rem;display:flex;gap:.5rem;flex-wrap:wrap}.vvdw-andere-vragen{white-space:nowrap}


/* v1.2.11.51 spacing & typography */
.qotw-checkbox-options,
.qotw-vote-buttons { margin-bottom: 1.25rem; } /* space between answers and submit row */

.vvdw-acties { margin-top: 1.75rem; } /* more air above button row */

.qotw-vote-results { margin-bottom: 1.5rem; } /* space between results and explanation */
.qotw-vraag-uitleg { margin-top: 2rem; } /* extra padding before explanation */

.qotw-vote-form button,
.qotw-vote-buttons button,
.vvdw-acties .btn {
  font-family: "PT Sans", "PTSans", Arial, sans-serif; /* match site */
  font-size: 1rem; /* align with body text */
  line-height: 1.5;
}

.vvdw-acties .vvdw-andere-vragen { align-self: center; }


/* v1.2.11.53: Hover/active affordances for clickable answer labels */
.qotw-checkbox-options label {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .6rem .8rem;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: .5rem;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .03s ease;
}
.qotw-checkbox-options label:hover {
  background-color: rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.2);
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.qotw-checkbox-options label:active {
  transform: translateY(1px);
}
/* Keyboard focus */
.qotw-checkbox-options label:focus-within {
  outline: 2px solid rgba(0,86,63,.25); /* BCFI-groen tint */
  outline-offset: 2px;
}
/* Selected state highlight (modern browsers) */
.qotw-checkbox-options label:has(input:checked) {
  background-color: rgba(0,86,63,.06);
  border-color: rgba(0,86,63,.45);
}
.qotw-checkbox-options input[type="checkbox"] {
  flex: 0 0 auto;
  margin: 0;
  transform: translateY(1px);
}

.qotw-vote-buttons button {
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .03s ease;
}
.qotw-vote-buttons button:hover {
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
  transform: translateY(-1px);
}
.qotw-vote-buttons button:active {
  transform: translateY(0);
}