/* ===================================================================
   BASE STYLES FROM TACIT-CSS (merged and modified)
   =================================================================== */

/* DOCUMENT CSS */
html,body,button,option {
  font-family: system-ui,"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-stretch: normal;
  font-style: normal;
  font-weight: 400;
  line-height: 29.7px
}
html,body {
  width: 100%
}
html {
  height: 100%
}
body {
  background: #fff;
  padding: 36px
}

/* PARAGRAPH CSS */
p,hr {
  margin-bottom: 1em
}
a {
  color: #275a90;
  text-decoration: none
}
a:hover{
  text-decoration: underline
}
hr {
  border-bottom: 1px solid #595959
}
var,em,i {
  font-style: italic
}
dt,strong,b {
  font-weight: 600
}
* {
  border-collapse: separate;
  border-spacing: 0;
  box-sizing: border-box;
  margin: 0;
  max-width: 100%;
  padding: 0;
  vertical-align: baseline
}
ol,ul {
  margin-bottom: 25px;
  margin-left: 60px;
  font-size: 22px
}
li dl,li ol,li ul {
  margin-bottom: 15px;
  font-size: 22px
}
blockquote {
  margin-bottom: 16px;
  margin-left: 60px
}

/* HEADINGS CSS */
h1,h2,h3,h4,h5,h6 {
  color: #000;
  margin-bottom: 12px
}
h1 {
  font-size: 36px;
  font-weight: 500;
  line-height: 43.2px;
  margin-top: 72px
}
h2 {
  font-size: 28px;
  font-weight: 500;
  line-height: 30px;
  margin-top: 36px;
}
h3 {
  line-height: 27px;
  margin-top: 36px
}
h4 {
  line-height: 23.4px;
  margin-top: 18px
}
h5 {
  font-weight: bold;
  line-height: 21.6px;
  text-transform: uppercase
}
h6 {
  color: #595959;
  font-weight: bold;
  line-height: 18px;
  text-transform: uppercase
}
p {
  text-align: left;
}

/* BUTTON CSS */
button {
  border-radius: 3.6px;
  display: inline-block;
  padding: 9.9px;
  cursor: pointer;
  display: inline;
  margin-bottom: 50px;
  margin-right: 7.2px;
  padding: 6.525px 23.4px;
  text-align: center;
  border: 1px solid dimgray;
  color: black
}
button[type="submit"] {
  background: #ffb347;
  color: black;
  font-size: 22px;
  width: 250px;
  margin-bottom: 20px;
  padding: 12px;
  opacity: 1;
  transition: 0.3s
}
button[type="submit"]:hover {
  opacity: 0.9
}
button[type="trial"] {
  width: 200px;
  border-radius: 4px;
  text-align: center;
  margin: auto;
  background: lightgray;
  color: black;
  border: black 1px solid;
  opacity: 0.8;
  transition: 0.3s
}
button[type="trial"]:hover {
  opacity: 1
}
button[type="trial"]:active {
  background-color: gray;
  transform: translateY(2px);
}

/* TRIAL CONTAINER CSS */
.page-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  row-gap: 60px
}

.trial-container {
  display: flex;
  flex-direction: row;
  align-items: center;
}

/* CIRCLE */
#circle {
  width: 50px;
  height: 50px;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  border-radius: 25px;
  background: rgba(37, 169, 37, 0.618);
}

/* SLIDER CSS */
.slidecontainer {
  width: 600px;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 20px;
  border-radius: 5px;
  background: rgb(255, 255, 255);
  border: black solid 1px;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 0.8;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 30%; 
  background: black;
  border: black solid 1px;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 30%;
  background: black;
  cursor: pointer;
}

/* ===================================================================
   CUSTOM OVERRIDES
   - Make main containers tighter (80% width)
   - Left-align radio buttons and paragraph text
   - Center headings
   - Set base font size to 24px
   =================================================================== */

html, body {
  font-size: 22px;
  /* Uniform page background */
  background-color: #f2f2f2;
  /* color: #000 !important; */
}

/* Make commonly used container-like elements 80% width and centered */
.container,
.wrap,
.content,
.main,
#main,
.experiment-container,
.alert-message-container,
#jspsych-content,
.jspsych-display-element {
  width: 80% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-top: 50px !important;
}

/* Make container backgrounds match the page grey so the entire page looks uniform */
/* .container,
.wrap,
.content,
.main,
#main,
.experiment-container,
.alert-message-container,
#jspsych-content,
.jspsych-display-element,
.alert-wrap,
#jspsych-debug-container,
.jspsych-display-element * {
  background-color: #f2f2f2;
} */

/* Paragraphs left-aligned */
p {
  text-align: left !important;
  font-size: 22px !important;
}

/* Force paragraph font-size within jsPsych and pretask containers */
#jspsych-content p,
.jspsych-display-element p,
.jspsych-content p,
.pretaskContext p,
.pretask-context p {
  font-size: 22px !important;
}

/* Headings */
h1 {
  text-align: center !important;
}

h2, h3, h4, h5, h6 {
  text-align: left !important;
}

/* Radio and checkbox inputs: visually align to the left of their labels */
input[type="radio"],
input[type="checkbox"] {
  margin-right: 0.5em !important;
  margin-left: 0 !important;
  vertical-align: middle !important;
  /* Slightly larger controls for easier tapping */
  transform: scale(1.25);
  -webkit-transform: scale(1.25);
  margin-bottom: 0.15em !important;
}

/* For jsPsych survey choices (and similar structures) use flex to keep the
   control and label aligned and left-justified. */
.jspsych-survey-multi-choice .jspsych-survey-choice,
.jspsych-survey-multi-select .jspsych-survey-choice,
.survey-choice,
.choice {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

/* Ensure labels don't wrap the input unexpectedly */
label {
  text-align: left !important;
}

/* Buttons and form controls should follow the base font size */
button, select, textarea, input[type="text"], input[type="email"], input[type="number"] {
  font-size: 20px !important;
}

/* Add extra spacing under buttons to separate from following content */
button {
  margin-bottom: 1.25rem !important;
  /* If a library pins buttons to the bottom via positioning, reset it */
  position: static !important;
  bottom: auto !important;
}

/* Center buttons horizontally on the page */
.jspsych-content,
.jspsych-display-element {
  text-align: center !important;
}

/* Keep ul tags left-aligned */
ul {
  text-align: left !important;
}

/* Ensure jsPsych and alert containers leave space at the bottom so buttons
   aren't flush with the viewport bottom. */
.jspsych-display-element,
#jspsych-content,
.experiment-container,
.alert-message-container,
.alert-wrap,
#jspsych-debug-container {
  padding-bottom: 2rem !important;
}


/* Also ensure labels inside jsPsych survey choices follow the font size */
.jspsych-survey-multi-choice .jspsych-survey-choice label,
.jspsych-survey-multi-select .jspsych-survey-choice label,
.jspsych-survey-likert .jspsych-survey-likert-opts label {
  font-size: 20px !important;
}

/* Pretask/likert: present options horizontally with a connecting line */
.pretaskContext .jspsych-survey-likert-opts,
.pretask-context .jspsych-survey-likert-opts,
.jspsych-survey-likert .jspsych-survey-likert-opts {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  position: relative !important;
  padding: 2rem 1rem 3rem 1rem !important; /* leave space for line */
}

/* Horizontal connecting line */
.pretaskContext .jspsych-survey-likert-opts::before,
.pretask-context .jspsych-survey-likert-opts::before,
.jspsych-survey-likert .jspsych-survey-likert-opts::before {
  content: '';
  position: absolute;
  left: 5% !important;
  right: 5% !important;
  top: 50% !important;
  height: 2px !important;
  /* Darker connecting line for better contrast */
  background: rgba(0,0,0,0.6) !important;
  z-index: 1 !important;
}

/* Ensure each choice sits above the line */
.pretaskContext .jspsych-survey-likert-opts .jspsych-survey-likert-opts-li,
.pretask-context .jspsych-survey-likert-opts .jspsych-survey-likert-opts-li,
.jspsych-survey-likert .jspsych-survey-likert-opts .jspsych-survey-likert-opts-li {
  background: transparent !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* Position the radio control to sit on the line */
.pretaskContext .jspsych-survey-likert-opts input[type="radio"],
.pretask-context .jspsych-survey-likert-opts input[type="radio"],
.jspsych-survey-likert .jspsych-survey-likert-opts input[type="radio"] {
  position: relative !important;
  top: -0.2rem !important;
  background: #fff !important;
  z-index: 3 !important;
}

/* Labels beneath each radio */
.pretaskContext .jspsych-survey-likert-opts label,
.pretask-context .jspsych-survey-likert-opts label,
.jspsych-survey-likert .jspsych-survey-likert-opts label {
  margin-top: 0.5rem !important;
  text-align: center !important;
  /* Larger response labels for readability in pretask */
  font-size: 26px !important;
}


/* Normalize jsPsych likert statement and option label fonts */
.jspsych-survey-likert-statement,
.jspsych-survey-likert-opt-label,
.jspsych-survey-likert .jspsych-survey-likert-opts label {
  font-size: 22px !important;
}

/* Normalize navigation/next button font to 24px (specific next button id) */
#jspsych-survey-likert-next,
.jspsych-btn,
button.jspsych-btn,
.pretaskContext button,
.pretask-context button {
  font-size: 22px !important;
  padding: 0.45rem 1.25rem !important;
  min-width: 140px !important;
}

/* Add borders around each survey question to visually separate them */
/* Single unified border around both question text and response options */
.jspsych-survey-likert-statement {
  border: 2px solid #ccc !important;
  border-bottom: none !important;
  border-radius: 8px 8px 0 0 !important;
  padding: 1.5rem 1.5rem 1rem 1.5rem !important;
  margin-bottom: 0 !important;
  background-color: #ffffff !important;
  font-weight: 500 !important;
}

/* Add border to the options list (response scale) to complete the box */
.jspsych-survey-likert-opts {
  border: 2px solid #ccc !important;
  border-top: none !important;
  border-radius: 0 0 8px 8px !important;
  padding: 2rem 1rem 3rem 1rem !important;
  margin-bottom: 2rem !important;
  background-color: #ffffff !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

/* Debrief text response boxes - 100% width */
.jspsych-survey-text textarea {
  width: 100% !important;
}