/* VERSION 6 */
/* Edit:
- Reworked the responsive layer from v5. v5 was a large-touchscreen layout
  (fixed 11x11 pixel grid) with four separate device-tier media queries
  (laptop / tablet / phone / very small phone) bolted on afterwards.
- v6 replaces the fixed grid + tiered breakpoints with a single fluid
  layout (flexbox + clamp()/min()/vw based sizing) that scales
  continuously with the available screen space instead of snapping
  between a handful of hard-coded device widths. No screen size is
  treated as the "default" - the same rules serve a large touchscreen,
  a laptop, a tablet or a phone.
- Colors, fonts and images are unchanged from v5.
- Based on VERSION 5
*/

/*
 * CSS for jsPsych experiments.
 *
 * This stylesheet provides minimal styling to make jsPsych
 * experiments look polished without any additional styles.
 */

/* Donders Citylab colours:
#ff908f - pink
#8f0100 (#8E0000) - dark red
#ffbe00 - yellow/orange
#fffaeb - beige

#8f0100 (#8E0000) - Dark red
#C9A1A1 - Rosy brown
#008E8E - Dark cyan
#EEEBE3 - Alabaster

 */

/* import lettertypes */
@import url(https://fonts.googleapis.com/css?family=Atkinson+Hyperlegible);
/* @import url('https://fonts.googleapis.com/css?family=Poppins&display=swap'); */

/* ========================================================= */
/* Base / fluid foundations                                   */
/* ========================================================= */

* {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  height: 100%;
  overflow-x: hidden;
}

/* basic style of headers, text, body etc. */
body {
  margin: 0;
  padding-inline: clamp(0.5rem, 2vw, 1.5rem);
  padding-block: clamp(0.15rem, 1vh, 0.75rem);
  font-family: 'Atkinson Hyperlegible';
  background: #fffefa;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

ul,
li {
  padding: 0;
  list-style-type: none;
}

/* Typography that scales continuously with the viewport instead of
   jumping between fixed device-tier sizes. */

h1 {
  color: #8f0100;
  font-size: clamp(1.6rem, 1.1rem + 3vw, 5rem);
  margin: clamp(0.3rem, 1.5vw, 1.25rem);
}

h2 {
  color: #8f0100;
  font-size: clamp(1.4rem, 1rem + 2.6vw, 4.25rem);
  margin: clamp(0.3rem, 1.5vw, 1.25rem);
}

h3 {
  color: black;
  /* maybe change to red */
  font-size: clamp(1.2rem, 0.95rem + 2vw, 3.1rem);
  margin: clamp(0.3rem, 1.5vw, 1.25rem);
  font-weight: normal;
}

h4 {
  color: black;
  font-size: clamp(1.05rem, 0.9rem + 1.2vw, 2rem);
  margin: clamp(0.3rem, 1.5vw, 1.25rem);
  text-decoration: none;
  font-weight: normal;
}

p,
a,
li {
  color: black;
  font-size: clamp(0.95rem, 0.8rem + 1vw, 2.5rem);
  margin: clamp(0.3rem, 1.5vw, 1.25rem);
  text-decoration: none;
}

img,
video {
  width: 100%;
  max-width: 100%;
  max-height: min(65vh, 640px);
  object-fit: contain;
}

/* button style */
.jspsych-btn {
  font-family: "Atkinson Hyperlegible";
  background-color: #00A297;
  padding: 0.6em 1.4em;
  border-radius: 50px;
  text-decoration: none;
  color: black;
  font-size: clamp(0.9rem, 0.8rem + 0.8vmin, 1.6rem);
  margin: 0;
  min-width: clamp(120px, 26vw, 220px);
  border: none;
  text-align: center;
  flex: 0 1 auto;
}

.jspsych-btn a {
  font-size: clamp(0.9rem, 0.8rem + 0.8vmin, 1.6rem);
}

/* only apply the hover style on devices with a mouse/pointer that can hover - issue #977 */
@media (hover: hover) {
  .jspsych-btn:hover {
    background-color: #00A297;
    border-color: black;
  }
}

.jspsych-btn:active {
  background-color: #008E8E;
  border-color: #000000;
}

.jspsych-btn:disabled {
  background-color: #B0CECE;
  color: #fffefa;
  border-color: none;
  cursor: not-allowed;
}

/* home button - a small fixed corner icon rather than a full-width
   header row, so it never takes vertical space away from trial
   content (the reason response buttons could end up below the fold
   on short/wide windows like a 14" laptop). */
header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
}

header .home {
  display: flex;
  align-items: center;
  padding: clamp(0.2rem, 1vmin, 0.6rem);
}

header .home a img {
  width: clamp(28px, 4vmin, 52px);
  max-height: none;
}

/* Container holding jsPsych content */

main {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  justify-content: center;
}

.jspsych-display-element {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.jspsych-display-element:focus {
  outline: none;
}

.jspsych-content-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
}

/* The 11x11 fixed pixel grid from v5 is replaced by a fluid flex
   layout: every direct child defaults to a full-width "row" so trial
   content stacks in document order on any screen. Elements that are
   meant to sit side-by-side (e.g. the two instruction columns) opt
   back in to sharing a row via flex-basis further down, and simply
   wrap onto their own line once the viewport is too narrow to fit
   them - no fixed breakpoint required. */
.jspsych-content {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  gap: clamp(0.35rem, 1.5vmin, 1.25rem);
  width: min(94vw, 1100px);
  margin: 0 auto;
  text-align: center;
}

.jspsych-content > * {
  flex: 1 1 100%;
  max-width: 100%;
}

/* fullscreen */
.jspsych-content .jspsych-fullscreen-message {
  flex-basis: 100%;
}

#jspsych-fullscreen-btn {
  flex-basis: 100%;
}

/* instructions*/
.jspsych-content .jspsych-instructions-header {
  flex-basis: 100%;
}

.jspsych-content .jspsych-instructions-body {
  flex-basis: 100%;
  text-align: left;
}

/* Paired instruction columns: fluid flex-basis lets them sit side by
   side when there's room, and wrap onto separate rows automatically
   on narrow screens - driven by available space, not a device tier. */
.jspsych-content .jspsych-instructions-column-left,
.jspsych-content .jspsych-instructions-column-left-wide,
.jspsych-content .jspsych-instructions-column-left-narrow {
  flex: 3 1 min(320px, 100%);
  text-align: left;
  margin-top: clamp(0.5rem, 2vw, 1.5rem);
}

.jspsych-content .jspsych-instructions-column-right,
.jspsych-content .jspsych-instructions-column-right-wide,
.jspsych-content .jspsych-instructions-column-right-narrow {
  flex: 2 1 min(220px, 100%);
  text-align: left;
  margin-top: clamp(0.5rem, 2vw, 1.5rem);
}

.jspsych-content .jspsych-instructions-body-top {
  flex-basis: 100%;
  text-align: left;
}

.jspsych-content .jspsych-instructions-body-column-left,
.jspsych-content .jspsych-instructions-body-column-right {
  flex: 1 1 min(320px, 100%);
  text-align: left;
}

.jspsych-content img {
  height: auto;
  width: 100%;
  max-height: min(60vh, 560px);
}

.jspsych-instructions-nav {
  flex-basis: 100%;
}

/* html button response */
#jspsych-html-button-response-stimulus {
  flex-basis: 100%;
}

#jspsych-html-button-response-btngroup,
#jspsych-image-button-response-btngroup,
#jspsych-video-button-response-btngroup,
#jspsych-html-button-response-btngroup-mcgurk {
  flex-basis: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(0.5rem, 2vw, 1.5rem);
}

#jspsych-html-button-response-stimulus-mcgurk {
  flex-basis: 100%;
}

/* html slider response */

#jspsych-html-slider-response-wrapper {
  flex-basis: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin: 0 !important;
}

#jspsych-html-slider-response-next {
  flex: 0 1 auto !important;
  flex-basis: auto !important;
  width: auto !important;
}

#jspsych-html-slider-response-stimulus {
  margin-bottom: clamp(0.5rem, 2vh, 1.25rem);
}

.jspsych-html-slider-response-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.5rem, 2vw, 1.5rem);
  /* !important overrides the pixel width jsPsych writes as an inline
     style on this element - without it the slider stays stuck at
     whatever (small) width the plugin computed. */
  width: min(90vw, 750px) !important;
  max-width: 100%;
  margin: 0 auto;
  position: relative;
  /* reserve room below the slider for the absolutely positioned 0/100
     labels so they don't overlap the current-value readout */
  padding-bottom: clamp(1.6rem, 5vh, 2.75rem);
  text-align: center;
}

/* Update the slider positioning */
.jspsych-slider {
  width: 100% !important;
  margin: 0 auto;
}

.current_value {
  color: black;
  font-size: clamp(0.95rem, 0.8rem + 1vw, 2.5rem);
  margin: clamp(0.3rem, 1.5vw, 1.25rem);
  text-decoration: none;
}

/* The "0" and "100" labels are positioned relative to the slider
   container itself (which is now the sized element, see above) so
   they sit exactly under the slider's left and right ends - and stay
   there regardless of how wide the slider is. */
.jspsych-slider-anchors {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
}

.slider-anchor-left,
.slider-anchor-middle,
.slider-anchor-right {
  position: absolute;
  bottom: 0;
  white-space: nowrap;
  margin: 0;
}

.slider-anchor-left {
  left: 0;
}

.slider-anchor-right {
  right: 0;
}

.slider-anchor-middle {
  left: 50%;
  transform: translateX(-50%);
}

/* image slider response */
.jspsych-image-slider-response-prompt {
  flex-basis: 100%;
}

#jspsych-image-slider-response-stimulus {
  max-width: 100%;
  max-height: min(55vh, 500px);
  width: auto;
  height: auto;
  margin: clamp(0.5rem, 2vh, 1.5rem) auto;
}

.jspsych-image-slider-response-container {
  flex-basis: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.5rem, 2vw, 1.5rem);
  width: 100%;
  text-align: center;
}

#jspsych-image-slider-response-next {
  flex: 0 1 auto !important;
  flex-basis: auto !important;
  width: auto !important;
}

/* slider style */
.jspsych-slider {
  height: 25px;
  -webkit-appearance: none;
  appearance: none;
  background-color: #ff908f;
  /*#ffbe00 or #008E8E */
  padding: 0.4em 1em;
  border-radius: 50px;
}

.jspsych-slider:focus {
  outline: none;
}

/* track */
/*.jspsych-slider::-webkit-slider-runnable-track {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 20px;
  cursor: pointer;
  background: #660f0f;
  box-shadow: 3px 3px 8px #000000, 0px 0px 0px #0d0d0d;
  border-radius: 20px;
  border: 0px solid #aaa;
}*/

.jspsych-slider::-moz-range-track {
  appearance: none;
  width: 100%;
  height: 20px;
  cursor: none;
  background: #eee;
  box-shadow: 3px 3px 8px #000000, 0px 0px 0px #0d0d0d;
  border-radius: 20px;
  border: 1px solid #aaa;
}

.jspsych-slider::-ms-track {
  appearance: none;
  width: 99%;
  height: 20px;
  cursor: none;
  background: #eee;
  box-shadow: 8px 8px 30px #000000, 0px 0px 0px #0d0d0d;
  border-radius: 20px;
  border: 1px solid #aaa;
}

/* thumb */
.jspsych-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: clamp(32px, 6vw, 100px);
  height: clamp(32px, 6vw, 100px);
  background: url('slider-brain.svg') no-repeat center;
  background-size: cover;
}

.jspsych-slider::-moz-range-thumb {
  border: 2px solid #666;
  width: clamp(28px, 4vw, 35px);
  height: clamp(28px, 4vw, 35px);
  border-radius: 40px;
  background: #57b0aa;
  box-shadow: 8px 8px 50px #000000, 0px 0px 0px #0d0d0d;
  cursor: pointer;
  border-color: #a21d1d;
  /* -webkit-appearance: none;*/
  margin-top: -9px;
}

.jspsych-slider::-ms-thumb {
  border: 2px solid #666;
  width: clamp(28px, 4vw, 35px);
  height: clamp(28px, 4vw, 35px);
  border-radius: 40px;
  background: #57b0aa;
  box-shadow: 8px 8px 50px #000000, 0px 0px 0px #0d0d0d;
  cursor: pointer;
  border-color: #a21d1d;
  -webkit-appearance: none;
  margin-top: -9px;
}


/* html keyboard response */
#jspsych-html-keyboard-response-stimulus {
  flex-basis: 100%;
  font-size: clamp(2rem, 1.5rem + 4vw, 6rem);
}

.jspsych-html-keyboard-response-prompt {
  flex-basis: 100%;
}


/* image keyboard response */
#jspsych-image-keyboard-response-stimulus {
  flex-basis: 100%;
  max-width: 100%;
  max-height: min(60vh, 560px);
  width: auto;
  height: auto;
  margin: 0 auto;
}

.jspsych-image-keyboard-response-prompt {
  flex-basis: 100%;
}


/* image button response */
.jspsych-image-button-response-prompt {
  flex-basis: 100%;
  text-align: center;
}

#jspsych-image-button-response-button {
  flex-basis: 100%;
}

#jspsych-image-button-response-stimulus {
  flex-basis: 100%;
}

#jspsych-image-button-response-btngroup {
  flex-basis: 100%;
}

/* visual searchlight */
#jspsych-visual-spotlight-overlay {
  flex-basis: 100%;
}

#jspsych-visual-spotlight-prompt {
  flex-basis: 100%;
}

:root {
  --mouse-x: 50%;
  --mouse-y: 50%;
}

/* video button response */
.jspsych-content .jspsych-video-button-response-stimulus {
  flex-basis: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Make the video keep its original dimensions */
#jspsych-video-button-response-stimulus {
  width: auto !important;
  height: auto;
  max-height: min(65vh, 620px) !important;
  max-width: min(92vw, 900px) !important;
  object-fit: contain !important;
}

.jspsych-video-button-response-prompt {
  flex-basis: 100%;
}

#jspsych-video-button-response-btngroup {
  flex-basis: 100%;
}

.jspsych-video-button-response-button {
  display: inline-block;
}

/* survey multi choice */
#jspsych-survey-multi-choice-form {
  flex-basis: 100%;
  display: flex;
  flex-direction: column;
  align-items: center; /* Centers the options natively without pushing them off-screen */
  text-align: center;
}

.required {
  display: none;
  /* hides the * for questions that are required too be filled out but keeps the choice mandatory */
}

#jspsych-survey-multi-choice-0 {
  text-align: center;
  font-size: clamp(1.1rem, 0.9rem + 1.6vw, 2.1rem);
  margin: clamp(0.5rem, 2vw, 1.25rem);
}

/* Removed translateX(25%) so options don't overflow past the right side of the screen */
#jspsych-survey-multi-choice-option-0-0,
#jspsych-survey-multi-choice-option-0-1,
#jspsych-survey-multi-choice-option-0-2,
#jspsych-survey-multi-choice-option-0-3,
#jspsych-survey-multi-choice-option-0-4,
#jspsych-survey-multi-choice-option-0-5 {
  text-align: left;
  transform: none; 
}

/* button */
#jspsych-survey-multi-choice-next {
  flex-basis: 100%;
}

/* changes the radio label */
input[type="radio"] {
  /* Add if not using autoprefixer */
  -webkit-appearance: none;
  appearance: none;
  /* For iOS < 15 to remove gradient background */
  background-color: #fffefa;
  /* Not removed via appearance */
  margin: 0;
  font: inherit;
  color: currentColor;
  width: 0.75em;
  /* changes size circle */
  height: 0.75em;
  /* changes size circle */
  border: 0.075em solid #8f0100;
  /* changes thickness border of circle */
  border-radius: 50%;
  /* changes the radius of the circle */
  transform: translateY(1em);
  /* changes the position of the label in relation to the text (not working)*/
  transform: translateX(-0.8em);
  /* distance between label and text */
}

input[type="radio"]:checked {
  background-color: #8f0100;
}

/* survey multi select */
#jspsych-survey-multi-select-form {
  flex-basis: 100%;
  text-align: center;
}

#jspsych-survey-multi-select-0 {
  text-align: left;
  font-size: clamp(1.1rem, 0.9rem + 1.6vw, 2.1rem);
  margin: clamp(0.5rem, 2vw, 1.25rem);
}

.jspsych-survey-multi-select-instruction {
  font-size: clamp(0.85rem, 0.7rem + 0.8vw, 1.4rem) !important;
  text-align: center;
  margin: 0px;
}

/* moves the option towards the middle if you have more options copy and paste one of them and change the number in ID to corresponding option - 1 (e.g option 7 is number 6)*/
#jspsych-survey-multi-select-option-0-0 {
  transform: translateX(25%);
}

#jspsych-survey-multi-select-option-0-1 {
  transform: translateX(25%);
}

#jspsych-survey-multi-select-option-0-2 {
  transform: translateX(25%);
}

#jspsych-survey-multi-select-option-0-3 {
  transform: translateX(25%);
}

#jspsych-survey-multi-select-option-0-4 {
  transform: translateX(25%);
}

#jspsych-survey-multi-select-option-0-5 {
  transform: translateX(25%);
}

/* changes checkbox */
input[type="checkbox"] {
  /* Add if not using autoprefixer */
  -webkit-appearance: none;
  appearance: none;
  /* For iOS < 15 to remove gradient background */
  background-color: #fffaeb;
  /* Not removed via appearance */
  margin: 0;
  font: inherit;
  color: currentColor;
  width: 0.75em;
  /* changes size circle */
  height: 0.75em;
  /* changes size circle */
  border: 0.075em solid #8f0100;
  /* changes thickness border of circle */
  border-radius: 50%;
  /* changes the radius of the circle */
  transform: translateY(1em);
  /* changes the position of the label in relation to the text (not working)*/
  transform: translateX(-1em);
  /* distance between label and text */
}

input[type="checkbox"]:checked {
  background-color: #8f0100;
}

/* survey likert */
#jspsych-survey-likert-form {
  flex-basis: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.5rem, 2vw, 1.5rem);
  width: 100%;
  text-align: center;
}

.jspsych-survey-likert-statement {
  width: 100%;
}

.jspsych-survey-likert-opts {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  gap: clamp(0.5rem, 2vw, 1rem);
}

#jspsych-survey-likert-next {
  width: 100%;
}

.jspsych-survey-likert-opts li {
  flex: 1 1 clamp(60px, 15vw, 120px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  position: relative;
  z-index: 1;
}

.jspsych-survey-likert-opt-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.5rem, 1.5vw, 1rem);
  margin: 0px;
}

/* animation */
#jspsych-animation-image {
  flex-basis: 100%;
  max-width: 100%;
  max-height: min(60vh, 560px);
  width: auto;
  height: auto;
  margin: 0 auto;
}

.jspsych-animation-prompt {
  flex-basis: 100%;
}



/* general */
.jspsych-top {
  align-items: flex-start;
}

.jspsych-middle {
  align-items: center;
}

/* fonts and type */

/* .jspsych-display-element {
  font-family: "Calibri";
  color: black;
  font-size: 30pt;
  line-height: 1.6em;

} */

/* Form elements like input fields and buttons */

.jspsych-display-element input[type="text"] {
  font-family: "Atkinson Hyperlegible";
  color: black;
  font-size: clamp(0.95rem, 0.8rem + 1vw, 2.5rem);
}

/* jsPsych progress bar */

#jspsych-progressbar-container {
  color: #555;
  border-bottom: 1px solid #dedede;
  background-color: #f9f9f9;
  margin-bottom: 1em;
  text-align: center;
  padding: 8px 0px;
  width: 100%;
  line-height: 1em;
}

#jspsych-progressbar-container span {
  font-size: 14px;
  padding-right: 14px;
}

#jspsych-progressbar-outer {
  background-color: #eee;
  width: min(90%, 400px);
  margin: auto;
  height: 14px;
  vertical-align: middle;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

#jspsych-progressbar-inner {
  background-color: #aaa;
  width: 0%;
  height: 100%;
}

/* Control appearance of jsPsych.data.displayData() */
#jspsych-data-display {
  text-align: left;
}

/* ========================================================= */
/* Story-choice screen (custom trial in index.html)          */
/* ========================================================= */

.story-select-wrapper {
  margin-top: clamp(1rem, 4vh, 3rem);
  width: 100%;
}

.story-select-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* Creates 3 equal columns across the screen */
  align-items: flex-end;
  gap: clamp(0.5rem, 3vw, 2rem);
  width: 100%;
}

.story-img {
  cursor: pointer;
  width: auto;
  height: auto;
  max-width: 100%;
}

.story-img:hover {
  transform: scale(1.05);
}

.story-img-fee {
  justify-self: start; /* Anchors the fairy to the left */
  max-width: clamp(90px, 16vw, 200px);
}

.story-img-tovenaar {
  justify-self: center; /* Forces the wizard to stay dead-center */
  max-width: clamp(80px, 15vw, 180px);
}

.story-img-draak {
  justify-self: end; /* Anchors the dragon to the right */
  max-width: clamp(180px, 42vw, 500px);
}